Skip to content

Commit 84a7a48

Browse files
wackerowwackerow
committed
refactor: extract lazy components
1 parent 00ad6e1 commit 84a7a48

File tree

9 files changed

+141
-117
lines changed

9 files changed

+141
-117
lines changed

‎app/[locale]/what-is-ethereum/_components/WhatTabs.tsx renamed to ‎app/[locale]/what-is-ethereum/_components/WhatTabs/index.tsx

File renamed without changes.

‎app/[locale]/what-is-ethereum/_components/WhatTabs/lazy.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import dynamic from "next/dynamic"
2+
3+
import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
4+
5+
const WhatTabsLazy = dynamic(() => import("."), {
6+
ssr: false,
7+
loading: () => (
8+
<>
9+
<div className="mb-4 flex w-2/3 gap-4 border-b py-4">
10+
<Skeleton className="flex-1" />
11+
<Skeleton className="flex-1" />
12+
</div>
13+
<div className="h-fit rounded-lg border p-8">
14+
<SkeletonLines noOfLines={5} className="pt-0" />
15+
</div>
16+
</>
17+
),
18+
})
19+
20+
export default WhatTabsLazy

‎app/[locale]/what-is-ethereum/_components/WhySlider.tsx renamed to ‎app/[locale]/what-is-ethereum/_components/WhySwiper/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const H3 = (props: ChildOnlyProp) => (
1818
<h3 className="text-xl font-semibold leading-xs md:text-2xl" {...props} />
1919
)
2020

21-
const WhySlider = () => {
21+
const WhySwiper = () => {
2222
const { t } = useTranslation("page-what-is-ethereum")
2323

2424
const slides = [
@@ -86,4 +86,4 @@ const WhySlider = () => {
8686
)
8787
}
8888

89-
export default WhySlider
89+
export default WhySwiper

‎app/[locale]/what-is-ethereum/_components/WhySwiper/lazy.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import dynamic from "next/dynamic"
2+
3+
import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
4+
5+
const WhySwiperLazy = dynamic(() => import("."), {
6+
ssr: false,
7+
loading: () => (
8+
<div className="h-fit space-y-8 rounded border bg-background p-8">
9+
<SkeletonLines noOfLines={5} />
10+
<SkeletonLines noOfLines={5} />
11+
<Skeleton className="mx-auto h-5 w-40 rounded-full" />
12+
</div>
13+
),
14+
})
15+
16+
export default WhySwiperLazy

‎app/[locale]/what-is-ethereum/page.tsx

Lines changed: 6 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { pick } from "lodash"
2-
import dynamic from "next/dynamic"
32
import {
43
getMessages,
54
getTranslations,
@@ -9,6 +8,7 @@ import { MdInfoOutline } from "react-icons/md"
98

109
import type { ChildOnlyProp, CommitHistory, Lang } from "@/lib/types"
1110

11+
import AdoptionChart from "@/components/AdoptionChart/lazy"
1212
import {
1313
Banner,
1414
BannerBody,
@@ -18,10 +18,12 @@ import {
1818
} from "@/components/BannerGrid"
1919
import Callout from "@/components/Callout"
2020
import Card from "@/components/Card"
21+
import EnergyConsumptionChart from "@/components/EnergyConsumptionChart/lazy"
2122
import FeedbackCard from "@/components/FeedbackCard"
2223
import FileContributors from "@/components/FileContributors"
2324
import I18nProvider from "@/components/I18nProvider"
2425
import { Image, ImageProps } from "@/components/Image"
26+
import ListenToPlayer from "@/components/ListenToPlayer/lazy"
2527
import MainArticle from "@/components/MainArticle"
2628
import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
2729
import StatErrorMessage from "@/components/StatErrorMessage"
@@ -31,7 +33,6 @@ import { Button } from "@/components/ui/buttons/Button"
3133
import { ButtonLink } from "@/components/ui/buttons/Button"
3234
import { Center, Flex, HStack, Stack } from "@/components/ui/flex"
3335
import InlineLink from "@/components/ui/Link"
34-
import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
3536

3637
import { cn } from "@/lib/utils/cn"
3738
import { getAppPageContributorInfo } from "@/lib/utils/contributors"
@@ -42,6 +43,9 @@ import {
4243
getRequiredNamespacesForPage,
4344
} from "@/lib/utils/translations"
4445

46+
import WhatTabs from "./_components/WhatTabs/lazy"
47+
import WhySwiper from "./_components/WhySwiper/lazy"
48+
4549
import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
4650
import dogeComputerImg from "@/public/images/doge-computer.png"
4751
import ethImg from "@/public/images/eth.png"
@@ -53,112 +57,6 @@ import whoRunsEthereum from "@/public/images/run-a-node/ethereum-inside.png"
5357
import stats from "@/public/images/upgrades/newrings.png"
5458
import hero from "@/public/images/what-is-ethereum.png"
5559

56-
const AdoptionChart = dynamic(() => import("@/components/AdoptionChart"), {
57-
ssr: false,
58-
loading: () => (
59-
<div className="ms-8 grid w-full max-w-96 flex-[2] grid-cols-3 gap-x-4 gap-y-6">
60-
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
61-
<Skeleton className="m-4" />
62-
</div>
63-
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border [&>div]:border-b last:[&>div]:border-none">
64-
{Array.from({ length: 3 }).map((_, idx) => (
65-
<div key={"col2" + idx} className="border-b p-4 last:border-none">
66-
<Skeleton className="" />
67-
</div>
68-
))}
69-
</div>
70-
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
71-
{Array.from({ length: 8 }).map((_, idx) => (
72-
<div key={"col2" + idx} className="border-b p-4 last:border-none">
73-
<Skeleton className="" />
74-
</div>
75-
))}
76-
</div>
77-
<Skeleton className="mx-6" />
78-
<Skeleton className="mx-6" />
79-
<Skeleton className="mx-6" />
80-
</div>
81-
),
82-
})
83-
84-
const ListenToPlayer = dynamic(() => import("@/components/ListenToPlayer"), {
85-
ssr: false,
86-
loading: () => <Skeleton className="h-10.5 w-56" />,
87-
})
88-
89-
const WhatTabs = dynamic(() => import("./_components/WhySlider"), {
90-
ssr: false,
91-
loading: () => (
92-
<>
93-
<div className="mb-4 flex w-2/3 gap-4 border-b py-4">
94-
<Skeleton className="flex-1" />
95-
<Skeleton className="flex-1" />
96-
</div>
97-
<div className="h-fit rounded-lg border p-8">
98-
<SkeletonLines noOfLines={5} className="pt-0" />
99-
</div>
100-
</>
101-
),
102-
})
103-
104-
const WhySwiper = dynamic(() => import("./_components/WhySlider"), {
105-
ssr: false,
106-
loading: () => (
107-
<div className="h-fit space-y-8 rounded border bg-background p-8">
108-
<SkeletonLines noOfLines={5} />
109-
<SkeletonLines noOfLines={5} />
110-
<Skeleton className="mx-auto h-5 w-40 rounded-full" />
111-
</div>
112-
),
113-
})
114-
115-
const EnergyConsumptionChart = dynamic(
116-
() => import("@/components/EnergyConsumptionChart"),
117-
{
118-
ssr: false,
119-
loading: () => (
120-
<div className="my-16 w-full space-y-4">
121-
<div className="grid w-full grid-cols-5 place-items-end sm:grid-cols-6 md:grid-cols-10">
122-
<div className="flex flex-col items-center space-y-4">
123-
<Skeleton className="h-60 w-9" />
124-
<Skeleton className="h-8 w-9" />
125-
</div>
126-
<div className="flex flex-col items-center space-y-4">
127-
<Skeleton className="h-40 w-9" />
128-
<Skeleton className="h-8 w-9" />
129-
</div>
130-
<div className="flex flex-col items-center space-y-4">
131-
<Skeleton className="h-20 w-9" />
132-
<Skeleton className="h-8 w-9" />
133-
</div>{" "}
134-
<div className="flex flex-col items-center space-y-4">
135-
<Skeleton className="h-10 w-9" />
136-
<Skeleton className="h-8 w-9" />
137-
</div>
138-
<div className="flex flex-col items-center space-y-4 max-sm:hidden">
139-
<Skeleton className="h-6 w-9" />
140-
<Skeleton className="h-8 w-9" />
141-
</div>
142-
{Array.from({ length: 4 }).map((_, idx) => (
143-
<div
144-
key={idx}
145-
className="flex flex-col items-center space-y-4 max-md:hidden"
146-
>
147-
<Skeleton className="h-3 w-9" />
148-
<Skeleton className="h-8 w-9" />
149-
</div>
150-
))}
151-
<div className="flex flex-col items-center space-y-4">
152-
<Skeleton className="h-1 w-9" />
153-
<Skeleton className="h-8 w-9" />
154-
</div>
155-
</div>
156-
<Skeleton className="mx-auto w-80" />
157-
</div>
158-
),
159-
}
160-
)
161-
16260
const Summary = ({
16361
className,
16462
...rest
@@ -377,7 +275,6 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
377275
<div className="w-full bg-background-highlight">
378276
<Section>
379277
<div className="mb-8">
380-
{/* CLIENT SIDE */}
381278
<ListenToPlayer slug={"what-is-ethereum"} />
382279
</div>
383280
<Stack className="gap-14">
@@ -429,7 +326,6 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
429326

430327
<TwoColumnContent>
431328
<Width60>
432-
{/* CLIENT SIDE */}
433329
<WhatTabs />
434330
</Width60>
435331
<Width40 />
@@ -449,13 +345,11 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
449345
<p>{t("page-what-is-ethereum-why-would-i-use-ethereum-2")}</p>
450346

451347
<div className="max-w-full">
452-
{/* CLIENT SIDE */}
453348
<WhySwiper />
454349
</div>
455350
</Stack>
456351
</Width60>
457352
<Width40>
458-
{/* CLIENT SIDE */}
459353
<AdoptionChart />
460354
</Width40>
461355
</TwoColumnContent>
@@ -701,7 +595,6 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
701595
<Section>
702596
<TwoColumnContent className="lg:flex-row-reverse">
703597
<Width40>
704-
{/* CLIENT SIDE */}
705598
<EnergyConsumptionChart />
706599
</Width40>
707600
<Width60>

‎src/components/AdoptionChart.tsx renamed to ‎src/components/AdoptionChart/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { useTheme } from "next-themes"
44

55
import type { ChildOnlyProp } from "@/lib/types"
66

7-
import { cn } from "@/lib/utils/cn"
7+
import { Flex } from "@/components/ui/flex"
88

9-
import { Flex } from "./ui/flex"
9+
import { cn } from "@/lib/utils/cn"
1010

1111
import useTranslation from "@/hooks/useTranslation"
1212

‎src/components/AdoptionChart/lazy.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import dynamic from "next/dynamic"
2+
3+
import { Skeleton } from "@/components/ui/skeleton"
4+
5+
const AdoptionChartLazy = dynamic(() => import("@/components/AdoptionChart"), {
6+
ssr: false,
7+
loading: () => (
8+
<div className="ms-8 grid w-full max-w-96 flex-[2] grid-cols-3 gap-x-4 gap-y-6">
9+
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
10+
<Skeleton className="m-4" />
11+
</div>
12+
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border [&>div]:border-b last:[&>div]:border-none">
13+
{Array.from({ length: 3 }).map((_, idx) => (
14+
<div key={"col2" + idx} className="border-b p-4 last:border-none">
15+
<Skeleton className="" />
16+
</div>
17+
))}
18+
</div>
19+
<div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
20+
{Array.from({ length: 8 }).map((_, idx) => (
21+
<div key={"col2" + idx} className="border-b p-4 last:border-none">
22+
<Skeleton className="" />
23+
</div>
24+
))}
25+
</div>
26+
<Skeleton className="mx-6" />
27+
<Skeleton className="mx-6" />
28+
<Skeleton className="mx-6" />
29+
</div>
30+
),
31+
})
32+
33+
export default AdoptionChartLazy

‎src/components/EnergyConsumptionChart/lazy.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import dynamic from "next/dynamic"
2+
3+
import { Skeleton } from "@/components/ui/skeleton"
4+
5+
const EnergyConsumptionChartLazy = dynamic(
6+
() => import("@/components/EnergyConsumptionChart"),
7+
{
8+
ssr: false,
9+
loading: () => (
10+
<div className="my-16 w-full space-y-4">
11+
<div className="grid w-full grid-cols-5 place-items-end sm:grid-cols-6 md:grid-cols-10">
12+
<div className="flex flex-col items-center space-y-4">
13+
<Skeleton className="h-60 w-9" />
14+
<Skeleton className="h-8 w-9" />
15+
</div>
16+
<div className="flex flex-col items-center space-y-4">
17+
<Skeleton className="h-40 w-9" />
18+
<Skeleton className="h-8 w-9" />
19+
</div>
20+
<div className="flex flex-col items-center space-y-4">
21+
<Skeleton className="h-20 w-9" />
22+
<Skeleton className="h-8 w-9" />
23+
</div>{" "}
24+
<div className="flex flex-col items-center space-y-4">
25+
<Skeleton className="h-10 w-9" />
26+
<Skeleton className="h-8 w-9" />
27+
</div>
28+
<div className="flex flex-col items-center space-y-4 max-sm:hidden">
29+
<Skeleton className="h-6 w-9" />
30+
<Skeleton className="h-8 w-9" />
31+
</div>
32+
{Array.from({ length: 4 }).map((_, idx) => (
33+
<div
34+
key={idx}
35+
className="flex flex-col items-center space-y-4 max-md:hidden"
36+
>
37+
<Skeleton className="h-3 w-9" />
38+
<Skeleton className="h-8 w-9" />
39+
</div>
40+
))}
41+
<div className="flex flex-col items-center space-y-4">
42+
<Skeleton className="h-1 w-9" />
43+
<Skeleton className="h-8 w-9" />
44+
</div>
45+
</div>
46+
<Skeleton className="mx-auto w-80" />
47+
</div>
48+
),
49+
}
50+
)
51+
52+
export default EnergyConsumptionChartLazy

‎src/components/ListenToPlayer/lazy.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import dynamic from "next/dynamic"
2+
3+
import { Skeleton } from "../ui/skeleton"
4+
5+
const LazyListenToPlayer = dynamic(() => import("."), {
6+
ssr: false,
7+
loading: () => <Skeleton className="h-10.5 w-56" />,
8+
})
9+
10+
export default LazyListenToPlayer

0 commit comments

Comments
 (0)