search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

feat(skeleton): added Skeleton Loading with Examples #1332

Open dhavalveera opened 3 months ago

dhavalveera commented 3 months ago

This Pull Request introduces Skeleton Loading components to Flowbite-React, leveraging the Flowbite package. Skeleton Loading provides users with a seamless loading experience by displaying placeholders while content is being fetched or loaded. This enhancement includes various Skeleton components such as Skeleton, Skeleton Video, Skeleton Image, Skeleton Card, Skeleton List, and Skeleton Testimonial, ensuring a consistent loading UI across different types of content. With these additions, users will enjoy smoother transitions and improved usability, enhancing the overall user experience of Flowbite-React applications.

Pardon me for the variable names, please suggest a better naming convention.

Summary by CodeRabbit

stackblitz[bot] commented 3 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

changeset-bot[bot] commented 3 months ago

⚠️ No Changeset found

Latest commit: 031c7b4d20c6eff3a9ffd4aa91bb4b4cd7548b74

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 31, 2024 11:51am
flowbite-react-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 31, 2024 11:51am
coderabbitai[bot] commented 3 months ago

Walkthrough

The update introduces a new Skeleton component in the Flowbite library, enhancing UI design with loading indicators that mimic the content being loaded. This includes various shapes and forms like cards, images, and lists, alongside customization options for their appearance, significantly improving the user experience during content loading.

Changes

Files Change Summary
apps/web/content/docs/components/skeleton.mdx Introduced documentation for the new Skeleton component in the Flowbite library.
apps/web/data/components.tsx
apps/web/data/docs-sidebar.ts		 Added Skeleton component to components list and docs sidebar.
apps/web/examples/index.ts
apps/web/examples/skeleton/index.ts		 Exported skeleton component examples.
packages/ui/src/components/Skeleton/...
(Skeleton.spec.tsx, Skeleton.stories.tsx, Skeleton.tsx, SkeletonCard.tsx, SkeletonImage.tsx, SkeletonList.tsx, SkeletonTestimonial.tsx, SkeletonVideo.tsx, index.ts, theme.ts)		 Introduced and implemented the Skeleton component and its variations, including tests and stories.
packages/ui/src/components/Flowbite/FlowbiteTheme.ts
packages/ui/src/index.ts
packages/ui/src/theme.ts		 Added FlowbiteSkeletonTheme interface and exported the Skeleton component and theme.

Possibly related issues

Poem

In the land of code where the bits do hop,
A Skeleton dances, never does it stop.
Mimicking content, it plays its part,
Loading placeholders, an artful start.
🐰 With every shape and form it takes,
A smoother web, this rabbit makes.
Celebrate the change, for progress we cheer, 🎉
With Skeleton components, the future is here!

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.
dhavalveera commented 2 months ago

@SutuSebastian - can you please review?

dhavalveera commented 2 weeks ago

@SutuSebastian - can you please review?