\r\n \tOpen Stackblitz Demo\r\n
\r\n![\"Skeleton](\"https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcXdjMnM1OWNrYmQyeTZteTQxOTJrcXVkMWpjbW4xcGNwYXNxanVyZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GrHJfT7omWaebHkJ6b/giphy.gif\")
\r\n\r\n\r\n \r\n
\r\n
` elements\r\nwithout needing any additional configuration. Moreover, it orchestrates a seamless transition, waiting until the content\r\nis fully loaded before concealing the Skeleton and unveiling the loaded content gracefully.\r\n\r\n#### Manual Loading\r\n\r\nUse the `loading` prop to manually control the loading state of the skeleton.\r\n\r\n```html\r\n\r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\n### :warning: Avoid the creation of dedicated skeleton screens\r\n\r\nInstead, craft components equipped with integrated skeleton states.\r\n\r\n**This methodology offers several advantages:**\r\n\r\n- **Harmonized Styles:** Ensures consistency across styles.\r\n- **Comprehensive Representation:** Components should embody all conceivable states, including loading.\r\n- **Enhanced Loading Flexibility:** Enables more adaptable loading sequences.\r\n\r\n### :art: Theming\r\n\r\nCustomize individual skeletons with props, or render a SkeletonTheme to style all skeletons below it.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n\r\n```\r\n\r\n> Props declared inside `\r\n
\r\n \r\n \r\n```\r\n\r\nThis happens because the skeleton has no intrinsic width. You can fix it by applying `flex: 1` to the skeleton\r\ncontainer, you can also set this style via the `containerClass` prop.\r\n","readmeFilename":"README.md"}