feat(ui): add Shadcn skeletons for dynamically loaded components #151
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces several updates to improve loading visuals. A new CSS variable, Changes
Sequence Diagram(s)sequenceDiagram
participant HP as Home Page
participant DI as Dynamic Import System
participant SK as Skeleton Component
participant LC as Loaded Content
HP->>DI: Request section component
DI-->>HP: Return corresponding Skeleton (e.g., SkeletonHero)
HP->>SK: Render Skeleton as placeholder (using dynamic opacity)
Note right of SK: Display loading state
HP->>DI: Fetch actual content
DI-->>HP: Return loaded content
HP->>SK: Replace skeleton with real content
sequenceDiagram
participant ST as SkeletonText
participant S as Skeleton
ST->>S: Loop over width values to render Skeleton items
S-->>ST: Render each Skeleton with dynamic width and opacity
Suggested labels
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
bot
added
documentation
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/web/components/base/skeleton-text.tsx (2)
6-8: Consider adding type constraints for width values.The width array could benefit from type constraints to ensure valid percentage values.
interface SkeletonTextProps { - width: number[] + width: Array<number & { readonly brand: unique symbol }> className?: string } + +type Percentage = number & { readonly brand: unique symbol } +const asPercentage = (n: number): Percentage => { + if (n < 0 || n > 100) throw new Error('Percentage must be between 0 and 100') + return n as Percentage +}
13-20: Consider memoizing the skeleton elements.For better performance when rendering multiple skeletons, consider using
useMemo.+import { useMemo } from 'react' + export const SkeletonText: FC<SkeletonTextProps> = ({ width, className }) => { + const skeletons = useMemo( + () => width.map((w) => ( + <Skeleton + key={w} + className={cn('h-4', className)} + style={{ width: `${w}%` }} + /> + )), + [width, className] + ) + return ( <div className="space-y-2"> - {width.map((w) => ( - <Skeleton - key={w} - className={cn('h-4', className)} - style={{ width: `${w}%` }} - /> - ))} + {skeletons} </div> ) }apps/web/components/sections/home/skeletons.tsx (2)
45-48: Consider optimizing array generation.The current array generation could be more performant using Array.from with a mapping function.
- {Array.from({ length: count }).map((_, index) => { - const key = `skeleton-${index}` - return <div key={key}>{renderItem(index)}</div> - })} + {Array.from( + { length: count }, + (_, index) => ( + <div key={`skeleton-${index}`}>{renderItem(index)}</div> + ) + )}
6-12: Consider using a const enum for columns and gap values.Using const enums would provide better type safety and maintainability.
+const enum GridColumns { + Two = 2, + Three = 3, + Four = 4, + Five = 5 +} + +const enum GridGap { + Small = 3, + Medium = 4, + Large = 6, + XLarge = 8, + XXLarge = 12 +} + interface SkeletonGridProps { count: number - columns?: 1 | 2 | 3 | 4 | 5 - gap?: 3 | 4 | 6 | 8 | 12 + columns?: GridColumns + gap?: GridGap className?: string renderItem: (index: number) => React.ReactNode }apps/web/app/css/globals.css (1)
52-52: Consider grouping skeleton variables with related theme properties.We could enhance the organization by moving the skeleton opacity variables near related opacity or component variables within each theme section. This would make it easier to maintain related theme properties together.
Consider this organization:
--ring: 99 57.1% 56.1%; + /* Component-specific opacities */ + --skeleton-opacity: 0.3; --radius: 0.75rem; - --skeleton-opacity: 0.3;And similarly in the dark theme:
--ring: 99 57.1% 46.1%; + /* Component-specific opacities */ + --skeleton-opacity: 0.2; --radius: 0.75rem; - --skeleton-opacity: 0.2;Also applies to: 81-81
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/app/css/globals.css(2 hunks)apps/web/components/base/skeleton-text.tsx(1 hunks)apps/web/components/base/skeleton.tsx(1 hunks)apps/web/components/pages/home.tsx(6 hunks)apps/web/components/sections/home/skeletons.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.css`: Review style files for consistent Tailwind utili...
**/*.css: Review style files for consistent Tailwind utility usage. Verify responsive design patterns and theme consistency. Check proper modularization and style reuse.
apps/web/app/css/globals.css
🔇 Additional comments (4)
apps/web/components/base/skeleton.tsx (1)
9-12: Great use of CSS custom properties!The transition to using CSS variables for opacity control is an excellent improvement. This approach provides better theme support and maintainability.
apps/web/components/pages/home.tsx (1)
17-18: Excellent optimization with SSR enabled for Hero!Enabling SSR for the Hero component is a great optimization that will improve the initial page load experience.
apps/web/app/css/globals.css (2)
52-52: Well-structured theme integration for skeleton components!The skeleton opacity values are thoughtfully chosen for both themes, with a higher opacity (0.3) in light mode for better visibility and a lower opacity (0.2) in dark mode to maintain comfortable contrast levels.
Also applies to: 81-81
52-52: Excellent Tailwind integration for skeleton components!The new CSS variables align perfectly with Tailwind's utility-first approach, enabling dynamic opacity control through utilities like
bg-primary/[var(--skeleton-opacity)]. This implementation maintains consistency with the existing design system while providing flexible skeleton loading states.Also applies to: 81-81
📝 Implement Shadcn Skeletons for Dynamically Loaded Components
🛠️ Issue
Closes #139
📖 Description
This PR enhances the loading experience by replacing basic fallback components with visually appealing Skeleton components from Shadcn/UI. Each Skeleton component is designed to match the layout and structure of its respective section, ensuring a seamless transition before the actual content loads.
🔄 Changes Implemented
Replaced basic fallbacks with Shadcn/UI Skeleton components for dynamically imported sections in home.tsx and other relevant components.
Created Skeleton components file for the dynamically loaded components on home.tsx
Created Skeleton components for Text placeholders with adjustable widths using <SkeletonText width={[100, 83, 74.6]} /> to simulate multiline text.
Ensured visual consistency by matching Skeleton layouts with actual components.
🏗️ New Structure
Skeleton components were added under:
apps/web/components/sections/home/skeletons.tsx
apps/web/components/base/skeleton-text.tsx
✅ Acceptance Criteria
All dynamically imported components now have corresponding Shadcn Skeleton fallbacks.
The loading experience is improved without introducing visual or functional regressions.
Skeletons accurately reflect the final component layouts.
🎯 Benefits
Enhanced user experience during loading.
Improved visual consistency across components.
More modular and reusable fallback components.
🔬 Testing
Verified Skeleton components display correctly during loading.
Ensured no UI breakages or unexpected layout shifts.
Summary by CodeRabbit
New Features
Style