Skip to content

Commit e8da0c5

Browse files
kacigayakacigaya
committed
Replace boneyard skeletons with local component
1 parent 55f2264 commit e8da0c5

16 files changed

Lines changed: 286 additions & 282 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ yarn-error.log*
3333
# env files (can opt-in for committing if needed)
3434
.env*
3535

36-
# boneyard generated bones
37-
/src/bones/*
38-
!/src/bones/registry.js
39-
4036
# vercel
4137
.vercel
4238

‎app/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Space_Grotesk, Outfit } from "next/font/google";
33
import "./globals.css";
44
import Navbar from "@/components/Navbar";
55
import Footer from "@/components/Footer";
6-
import BoneRegistry from "@/components/BoneRegistry";
76

87
const heading = Space_Grotesk({
98
variable: "--font-heading",
@@ -35,7 +34,6 @@ export default function RootLayout({
3534
<link rel="dns-prefetch" href="https://image.tmdb.org" />
3635
</head>
3736
<body className="min-h-dvh flex flex-col bg-background text-foreground antialiased">
38-
<BoneRegistry />
3937
<Navbar />
4038
<main className="flex-1">{children}</main>
4139
<Footer />

‎app/loading.tsx‎

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,55 @@
1-
"use client";
1+
import { Skeleton } from "@/components/ui/skeleton";
22

3-
import { Skeleton } from "boneyard-js/react";
3+
const CAROUSEL_COUNT = 13;
44

55
export default function HomeLoading() {
66
return (
7-
<Skeleton
8-
name="home"
9-
loading={true}
10-
animate="shimmer"
11-
fallback={
12-
<div className="flex flex-col">
13-
<div className="w-full h-[70vh] sm:h-[80vh] bg-muted animate-pulse" />
14-
<div className="-mt-20 relative z-10 flex flex-col gap-10 pb-16 max-w-7xl mx-auto w-full px-4 sm:px-6">
15-
{Array.from({ length: 4 }).map((_, i) => (
16-
<div key={i} className="space-y-4">
17-
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
18-
<div className="flex gap-3 sm:gap-4">
19-
{Array.from({ length: 7 }).map((_, j) => (
20-
<div
21-
key={j}
22-
className="shrink-0 w-40 sm:w-46 aspect-[2/3] bg-muted animate-pulse rounded-xl"
23-
/>
24-
))}
25-
</div>
7+
<div className="flex flex-col">
8+
{/* Hero skeleton */}
9+
<div className="relative w-full h-[70vh] sm:h-[80vh] overflow-hidden">
10+
<Skeleton className="absolute inset-0 rounded-none" />
11+
<div className="absolute inset-0 bg-linear-to-t from-background via-background/60 to-transparent" />
12+
<div className="absolute inset-0 bg-linear-to-t from-background/80 via-transparent to-transparent" />
13+
14+
<div className="absolute inset-0 flex items-end">
15+
<div className="mx-auto max-w-7xl w-full px-4 sm:px-6 pb-16 sm:pb-24">
16+
<div className="max-w-2xl space-y-4">
17+
<div className="flex items-center gap-3">
18+
<Skeleton className="h-5 w-20 rounded-full" />
19+
<Skeleton className="h-4 w-10" />
20+
<Skeleton className="h-4 w-10" />
21+
</div>
22+
<Skeleton className="h-12 sm:h-14 lg:h-16 w-96 max-w-[80vw]" />
23+
<div className="space-y-2 max-w-xl">
24+
<Skeleton className="h-4 w-full" />
25+
<Skeleton className="h-4 w-full" />
26+
<Skeleton className="h-4 w-3/4" />
27+
</div>
28+
<div className="flex items-center gap-3 pt-2">
29+
<Skeleton className="h-12 w-40 rounded-full" />
30+
<Skeleton className="h-12 w-36 rounded-full" />
2631
</div>
27-
))}
32+
</div>
2833
</div>
2934
</div>
30-
}
31-
>
32-
{null}
33-
</Skeleton>
35+
</div>
36+
37+
{/* Carousel skeletons */}
38+
<div className="-mt-16 relative z-10 flex flex-col gap-10 pb-16 max-w-7xl mx-auto w-full">
39+
{Array.from({ length: CAROUSEL_COUNT }).map((_, i) => (
40+
<div key={i} className="space-y-4 px-4 sm:px-6">
41+
<Skeleton className="h-8 w-48" />
42+
<div className="flex gap-3 sm:gap-4">
43+
{Array.from({ length: 7 }).map((_, j) => (
44+
<Skeleton
45+
key={j}
46+
className="shrink-0 w-40 sm:w-46.25 aspect-2/3 rounded-xl"
47+
/>
48+
))}
49+
</div>
50+
</div>
51+
))}
52+
</div>
53+
</div>
3454
);
3555
}

‎app/movie/[id]/loading.tsx‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,60 @@
1-
"use client";
2-
3-
import { Skeleton } from "boneyard-js/react";
1+
import { Skeleton } from "@/components/ui/skeleton";
42

53
export default function MovieLoading() {
64
return (
7-
<Skeleton
8-
name="movie-detail"
9-
loading={true}
10-
animate="shimmer"
11-
fallback={
12-
<div className="flex flex-col">
13-
<div className="w-full h-[50vh] sm:h-[60vh] bg-muted animate-pulse" />
14-
<div className="relative -mt-48 z-10 mx-auto max-w-7xl w-full px-4 sm:px-6 pb-16">
15-
<div className="flex flex-col sm:flex-row gap-8">
16-
<div className="shrink-0 mx-auto sm:mx-0 w-50 sm:w-65 aspect-[2/3] bg-muted animate-pulse rounded-2xl" />
17-
<div className="flex-1 space-y-5 pt-4 sm:pt-16">
18-
<div className="h-12 w-75 max-w-full bg-muted animate-pulse rounded" />
19-
<div className="h-5 w-64 bg-muted animate-pulse rounded" />
20-
<div className="h-12 w-44 bg-muted animate-pulse rounded-full" />
21-
</div>
5+
<div className="flex flex-col">
6+
{/* Backdrop skeleton */}
7+
<div className="relative w-full h-[50vh] sm:h-[60vh]">
8+
<Skeleton className="absolute inset-0 rounded-none" />
9+
<div className="absolute inset-0 bg-linear-to-t from-background via-background/70 to-background/30" />
10+
</div>
11+
12+
{/* Content skeleton */}
13+
<div className="relative -mt-48 z-10 mx-auto max-w-7xl w-full px-4 sm:px-6 pb-16">
14+
<div className="flex flex-col sm:flex-row gap-8">
15+
<Skeleton className="shrink-0 mx-auto sm:mx-0 w-50 sm:w-65 aspect-2/3 rounded-2xl" />
16+
17+
<div className="flex-1 space-y-5 pt-4 sm:pt-16">
18+
<div className="flex gap-2">
19+
{Array.from({ length: 3 }).map((_, i) => (
20+
<Skeleton key={i} className="h-6 w-20 rounded-full" />
21+
))}
22+
</div>
23+
<Skeleton className="h-12 w-75 max-w-full" />
24+
<Skeleton className="h-5 w-64" />
25+
<div className="flex gap-4">
26+
<Skeleton className="h-5 w-20" />
27+
<Skeleton className="h-5 w-20" />
28+
<Skeleton className="h-5 w-32" />
2229
</div>
30+
<Skeleton className="h-12 w-44 rounded-full" />
31+
<Skeleton className="h-px w-full" />
32+
<div className="space-y-2">
33+
<Skeleton className="h-6 w-24" />
34+
<Skeleton className="h-4 w-full" />
35+
<Skeleton className="h-4 w-full" />
36+
<Skeleton className="h-4 w-3/4" />
37+
</div>
38+
</div>
39+
</div>
40+
41+
{/* Cast skeleton */}
42+
<div className="mt-12 space-y-4">
43+
<Skeleton className="h-7 w-20" />
44+
<div className="flex gap-4">
45+
{Array.from({ length: 8 }).map((_, i) => (
46+
<div
47+
key={i}
48+
className="shrink-0 w-27.5 flex flex-col items-center gap-2"
49+
>
50+
<Skeleton className="w-27.5 h-27.5 rounded-full" />
51+
<Skeleton className="h-4 w-20" />
52+
<Skeleton className="h-3 w-16" />
53+
</div>
54+
))}
2355
</div>
2456
</div>
25-
}
26-
>
27-
{null}
28-
</Skeleton>
57+
</div>
58+
</div>
2959
);
3060
}

‎app/movie/[id]/page.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { notFound } from "next/navigation";
22
import type { Metadata } from "next";
3-
import BoneSkeleton from "@/components/BoneSkeleton";
43
import Image from "next/image";
54
import Link from "next/link";
65
import { Play, Star, Clock, Calendar } from "lucide-react";
@@ -54,7 +53,6 @@ export default async function MoviePage({
5453
const topCast = credits.cast.slice(0, 12);
5554

5655
return (
57-
<BoneSkeleton name="movie-detail">
5856
<div className="flex flex-col">
5957
{/* Backdrop */}
6058
<div className="relative w-full h-[50vh] sm:h-[60vh]">
@@ -238,6 +236,5 @@ export default async function MoviePage({
238236
)}
239237
</div>
240238
</div>
241-
</BoneSkeleton>
242239
);
243240
}

‎app/page.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import BoneSkeleton from "@/components/BoneSkeleton";
21
import Hero from "@/components/Hero";
32
import Carousel from "@/components/Carousel";
43
import {
@@ -52,26 +51,24 @@ export default async function HomePage() {
5251
const featuredItems = trending.map(movieToMedia);
5352

5453
return (
55-
<BoneSkeleton name="home">
56-
<div className="flex flex-col">
57-
{featuredItems.length > 0 && <Hero items={featuredItems} />}
54+
<div className="flex flex-col">
55+
{featuredItems.length > 0 && <Hero items={featuredItems} />}
5856

59-
<div className="-mt-16 relative z-10 flex flex-col gap-10 pb-16 max-w-7xl mx-auto w-full">
60-
<Carousel title="Trending Movies" items={trending.map(movieToMedia)} priority />
61-
<Carousel title="Trending TV Shows" items={trendingTV.map(tvToMedia)} />
62-
<Carousel title="Popular Movies" items={popular.map(movieToMedia)} />
63-
<Carousel title="Popular TV Shows" items={popularTV.map(tvToMedia)} />
64-
<Carousel title="Top Rated Movies" items={topRated.map(movieToMedia)} />
65-
<Carousel title="Top Rated TV" items={topRatedTV.map(tvToMedia)} />
66-
<Carousel title="Now Playing" items={nowPlaying.map(movieToMedia)} />
67-
<Carousel title="On The Air" items={onTheAirTV.map(tvToMedia)} />
68-
<Carousel title="Upcoming" items={upcoming.map(movieToMedia)} />
69-
<Carousel title="Action" items={action.map(movieToMedia)} />
70-
<Carousel title="Comedy" items={comedy.map(movieToMedia)} />
71-
<Carousel title="Horror" items={horror.map(movieToMedia)} />
72-
<Carousel title="Sci-Fi" items={scifi.map(movieToMedia)} />
73-
</div>
57+
<div className="-mt-20 relative z-10 flex flex-col gap-10 pb-16 max-w-7xl mx-auto w-full">
58+
<Carousel title="Trending Movies" items={trending.map(movieToMedia)} priority />
59+
<Carousel title="Trending TV Shows" items={trendingTV.map(tvToMedia)} />
60+
<Carousel title="Popular Movies" items={popular.map(movieToMedia)} />
61+
<Carousel title="Popular TV Shows" items={popularTV.map(tvToMedia)} />
62+
<Carousel title="Top Rated Movies" items={topRated.map(movieToMedia)} />
63+
<Carousel title="Top Rated TV" items={topRatedTV.map(tvToMedia)} />
64+
<Carousel title="Now Playing" items={nowPlaying.map(movieToMedia)} />
65+
<Carousel title="On The Air" items={onTheAirTV.map(tvToMedia)} />
66+
<Carousel title="Upcoming" items={upcoming.map(movieToMedia)} />
67+
<Carousel title="Action" items={action.map(movieToMedia)} />
68+
<Carousel title="Comedy" items={comedy.map(movieToMedia)} />
69+
<Carousel title="Horror" items={horror.map(movieToMedia)} />
70+
<Carousel title="Sci-Fi" items={scifi.map(movieToMedia)} />
7471
</div>
75-
</BoneSkeleton>
72+
</div>
7673
);
7774
}

0 commit comments

Comments
 (0)