Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-13 23:20:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix loading skeleton

Browse source
This commit is contained in:
Pas 2025-06-04 12:58:41 -06:00
parent 185555a960
commit b7c6f71a4c
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/pages/discover/components/MediaCarousel.tsx
View file

@ -138,7 +138,7 @@ export function MediaCarousel({
// Set up intersection observer for lazy loading
const { targetRef, isIntersecting } = useIntersectionObserver({
rootMargin: "200px",
rootMargin: "300px",
});
// Handle provider/genre selection
@ -300,16 +300,27 @@ export function MediaCarousel({
})();
// Loading state
if (!isIntersecting) {
if (!isIntersecting || !sectionTitle) {
return (
<div ref={targetRef as React.RefObject<HTMLDivElement>}>
<div className="flex items-center justify-between ml-2 md:ml-8 mt-2">
<div className="flex gap-4 items-center">
<h2 className="text-2xl cursor-default font-bold text-white md:text-2xl pl-5 text-balance">
{sectionTitle}
Loading...
</h2>
</div>
</div>
<div className="relative overflow-hidden carousel-container md:pb-4">
<div className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8">
<div className="md:w-12" />
{Array.from({ length: 10 }).map(() => (
<MediaCardSkeleton
key={`loading-skeleton-${Math.random().toString(36).substring(7)}`}
/>
))}
<div className="md:w-12" />
</div>
</div>
</div>
);
}
@ -522,7 +533,7 @@ export function MediaCarousel({
))
: Array.from({ length: 10 }).map(() => (
<MediaCardSkeleton
key={`skeleton-${categorySlug}-${Math.random().toString(36).substring(7)}`}
key={`loading-skeleton-${Math.random().toString(36).substring(7)}`}
/>
))}