Skip to content

Commit

Permalink
fix: layout shift homepage feature module
Browse files Browse the repository at this point in the history
  • Loading branch information
thedaviddias committed Feb 8, 2025
1 parent ed870a4 commit 7c03ec5
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 2 deletions.
21 changes: 20 additions & 1 deletion app/_components/featured.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,31 @@ const FeaturedPatternSection = ({ pattern }: { pattern: Pattern }) => {
);
};

const FeaturedPatternSkeleton = () => {
return (
<div className="featured-pattern animate-fade-up flex flex-col mt-10 py-10 px-4 border border-neutral-400 dark:border-neutral-600 rounded-xl">
<div className="absolute inset-0 bg-gradient-radial from-neutral-900/10 via-transparent to-transparent dark:bg-gradient-radial dark:from-neutral-500/10 dark:via-transparent dark:to-transparent" />
<div className="relative">
<div className="flex items-center gap-2">
<div className="h-4 w-5 rounded-full bg-neutral-200 dark:bg-neutral-700 animate-pulse" />
<div className="h-4 w-32 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
</div>
<div className="mt-4 h-8 w-3/4 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
<div className="mt-2 h-10 w-full bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
<div className="mt-6">
<div className="h-8 w-24 bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse" />
</div>
</div>
</div>
)
}

export const FeaturedPattern = () => {
const [pattern, setPattern] = useState<Pattern | null>(null)

useEffect(() => {
getRandomPattern().then(setPattern)
}, [])

return pattern ? <FeaturedPatternSection pattern={pattern} /> : null;
return pattern ? <FeaturedPatternSection pattern={pattern} /> : <FeaturedPatternSkeleton />;
};
2 changes: 1 addition & 1 deletion content/en/patterns/navigation/load-more.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ To improve usability, ensure that the "Load More" button is **removed when all c
### When not to use:

- When the full content list is small enough to load upfront without performance concerns
- If users need to compare multiple items at once (pagination may be a better alternative)
- If users need to compare multiple items at once ([pagination](/patterns/navigation/pagination) may be a better alternative)
- When real-time updates or continuous data streaming is required

### Common scenarios and examples
Expand Down

0 comments on commit 7c03ec5

Please sign in to comment.