Skip to content

Commit 2fa3d4f

Browse files
wackerowwackerow
committed
refactor: update 10years/home pages with lazy imports
updates to use lazy loaded versions of client-side components
1 parent 5e58bfb commit 2fa3d4f

File tree

7 files changed

+370
-333
lines changed

7 files changed

+370
-333
lines changed

‎app/[locale]/10years/_components/TenYearHero.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { getTranslations } from "next-intl/server"
22

33
import { Image } from "@/components/Image"
4-
import ParallaxImage from "@/components/Image/ParallaxImage"
5-
import Morpher from "@/components/Morpher"
4+
import ParallaxImage from "@/components/Image/ParallaxImage/server"
5+
import Morpher from "@/components/Morpher/server"
66

77
import TenYearBackgroundImage from "@/public/images/10-year-anniversary/10-year-background.png"
88
import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-graphic.png"
@@ -36,6 +36,7 @@ const TenYearHero = async ({ locale }: { locale: string }) => {
3636
alt="" // decorative element
3737
className="max-h-[350px] object-cover"
3838
/>
39+
{/* CLIENT SIDE, lazy loaded */}
3940
<ParallaxImage
4041
src={TenYearGraphicImage}
4142
alt={t("page-10-year-anniversary-meta-title")}
@@ -52,6 +53,7 @@ const TenYearHero = async ({ locale }: { locale: string }) => {
5253
{WORDS[0]}
5354
</span>
5455
<span className="text-3xl font-bold text-accent-b md:absolute md:start-0 md:text-nowrap">
56+
{/* CLIENT SIDE, lazy loaded */}
5557
<Morpher words={WORDS} charSet="abcdfgijklnopqsvwxyz" />
5658
</span>
5759
</span>

‎app/[locale]/10years/_components/TenYearHomeBanner.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import { getTranslations } from "next-intl/server"
1+
import { getLocale, getTranslations } from "next-intl/server"
22

33
import { Image } from "@/components/Image"
4-
import ParallaxImage from "@/components/Image/ParallaxImage"
4+
import ParallaxImage from "@/components/Image/ParallaxImage/server"
55
import { ButtonLink } from "@/components/ui/buttons/Button"
66

7-
import Countdown from "./CountDown"
7+
import Countdown from "./CountDown/server"
88
import { getTimeUnitTranslations } from "./utils"
99

1010
import TenYearBackgroundImage from "@/public/images/10-year-anniversary/10-year-background.png"
1111
import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-logo.png"
1212
import TenYearDesktopText from "@/public/images/10-year-anniversary/10yeartext.svg"
1313
import TenYearMobileText from "@/public/images/10-year-anniversary/10yeartext-mobile.svg"
1414

15-
const TenYearHomeBanner = async ({ locale }: { locale: string }) => {
15+
const TenYearHomeBanner = async () => {
16+
const locale = await getLocale()
1617
const t = await getTranslations({
1718
locale,
1819
namespace: "page-10-year-anniversary",
1920
})
2021

21-
const timeLeftLabels = await getTimeUnitTranslations(locale)
22+
const timeLeftLabels = await getTimeUnitTranslations()
2223

2324
return (
2425
<div className="relative rounded-2xl bg-cover bg-center text-center">
@@ -32,6 +33,7 @@ const TenYearHomeBanner = async ({ locale }: { locale: string }) => {
3233
/>
3334
</div>
3435
<div className="relative rounded-2xl p-8">
36+
{/* CLIENT SIDE, lazy loaded */}
3537
<ParallaxImage
3638
src={TenYearGraphicImage}
3739
alt=""
@@ -48,6 +50,7 @@ const TenYearHomeBanner = async ({ locale }: { locale: string }) => {
4850
</p>
4951
<p>{t("page-10-year-banner-tagline")}</p>
5052
</div>
53+
{/* CLIENT SIDE, lazy loaded */}
5154
<Countdown
5255
className="mb-8 mt-4 bg-background"
5356
timeLeftLabels={timeLeftLabels}

‎app/[locale]/10years/_components/data.tsx

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,3 @@
1-
import Adoption1Image from "@/public/images/10-year-anniversary/adoption-1.png"
2-
import Adoption2Image from "@/public/images/10-year-anniversary/adoption-2.png"
3-
import Adoption3Image from "@/public/images/10-year-anniversary/adoption-3.png"
4-
import DefiSummerImage from "@/public/images/10-year-anniversary/defi-summer.png"
5-
import EthETFImage from "@/public/images/10-year-anniversary/eth-etf.png"
6-
import EthereumLaunchImage from "@/public/images/10-year-anniversary/ethereum-launch.png"
7-
import NftImage from "@/public/images/10-year-anniversary/nft-frontier.png"
8-
import TheMergeImage from "@/public/images/10-year-anniversary/robot-and-crowd-cheering.png"
9-
import Adoption5Image from "@/public/images/10-year-anniversary/robot-walking.png"
10-
import StableCoinImage from "@/public/images/10-year-anniversary/the-pioneer-stablecoin.png"
11-
import Adoption4Image from "@/public/images/10-year-anniversary/walking-talking-1.png"
12-
import Adoption6Image from "@/public/images/10-year-anniversary/walking-talking-2.png"
13-
14-
const adoptionCards = [
15-
{
16-
image: Adoption1Image,
17-
href: "/resources",
18-
},
19-
{
20-
image: Adoption2Image,
21-
href: "/roadmap",
22-
},
23-
{
24-
image: Adoption3Image,
25-
href: "/stablecoins",
26-
},
27-
{
28-
image: Adoption4Image,
29-
href: "/defi",
30-
},
31-
{
32-
image: Adoption5Image,
33-
href: "/energy-consumption",
34-
},
35-
{
36-
image: Adoption6Image,
37-
href: "/layer-2",
38-
},
39-
]
40-
411
// duplicate 1 2 3, 1 2 3 to fix mobile slider bug where styles are not applied
422
const adoptionStyles = [
433
"bg-background bg-gradient-to-b from-20% to-60% from-accent-c/10 to-accent-c/5 dark:from-accent-c/20 dark:to-accent-c/10 border-accent-c/10",
@@ -48,25 +8,4 @@ const adoptionStyles = [
488
"bg-background bg-gradient-to-b from-20% to-60% from-accent-a/10 to-accent-a/5 dark:from-accent-a/20 dark:to-accent-a/10 border-accent-a/10",
499
]
5010

51-
const innovationCards = [
52-
{
53-
image: EthereumLaunchImage,
54-
},
55-
{
56-
image: StableCoinImage,
57-
},
58-
{
59-
image: NftImage,
60-
},
61-
{
62-
image: DefiSummerImage,
63-
},
64-
{
65-
image: TheMergeImage,
66-
},
67-
{
68-
image: EthETFImage,
69-
},
70-
]
71-
72-
export { adoptionCards, adoptionStyles, innovationCards }
11+
export { adoptionStyles }

‎app/[locale]/10years/_components/types.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,16 @@ export type Story = {
1414
export type AdoptionCard = {
1515
image: StaticImageData
1616
title: string
17-
description: React.ReactNode
17+
description?: React.ReactNode
1818
href: string
1919
linkText: string
2020
}
21+
22+
export type InnovationCard = {
23+
image: StaticImageData
24+
title: string
25+
date: string
26+
description1: string
27+
description2: string
28+
className?: string
29+
}

‎app/[locale]/10years/_components/utils.ts

Lines changed: 90 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1-
import { getTranslations } from "next-intl/server"
1+
import { getLocale, getTranslations } from "next-intl/server"
22

33
import { TimeLeftLabels } from "@/lib/types"
44

55
import { formatDate, isValidDate } from "@/lib/utils/date"
66

77
import { DEFAULT_LOCALE } from "@/lib/constants"
88

9-
import type { Story } from "./types"
9+
import type { AdoptionCard, InnovationCard, Story } from "./types"
10+
11+
import Adoption1Image from "@/public/images/10-year-anniversary/adoption-1.png"
12+
import Adoption2Image from "@/public/images/10-year-anniversary/adoption-2.png"
13+
import Adoption3Image from "@/public/images/10-year-anniversary/adoption-3.png"
14+
import DefiSummerImage from "@/public/images/10-year-anniversary/defi-summer.png"
15+
import EthETFImage from "@/public/images/10-year-anniversary/eth-etf.png"
16+
import EthereumLaunchImage from "@/public/images/10-year-anniversary/ethereum-launch.png"
17+
import NftImage from "@/public/images/10-year-anniversary/nft-frontier.png"
18+
import TheMergeImage from "@/public/images/10-year-anniversary/robot-and-crowd-cheering.png"
19+
import Adoption5Image from "@/public/images/10-year-anniversary/robot-walking.png"
20+
import StableCoinImage from "@/public/images/10-year-anniversary/the-pioneer-stablecoin.png"
21+
import Adoption4Image from "@/public/images/10-year-anniversary/walking-talking-1.png"
22+
import Adoption6Image from "@/public/images/10-year-anniversary/walking-talking-2.png"
1023

1124
const parseDate = (date: string, locale = DEFAULT_LOCALE): string => {
1225
// TODO: Remove this check when spreadsheet is fixed
@@ -34,7 +47,8 @@ export const parseStoryDates = (
3447
date: parseDate(date, locale),
3548
}))
3649

37-
export const getTimeUnitTranslations = async (locale: string) => {
50+
export const getTimeUnitTranslations = async () => {
51+
const locale = await getLocale()
3852
const t = await getTranslations({
3953
locale,
4054
namespace: "page-10-year-anniversary",
@@ -59,3 +73,76 @@ export const getTimeUnitTranslations = async (locale: string) => {
5973
}
6074
return timeLeftLabels
6175
}
76+
77+
export const getInnovationCards = async (): Promise<InnovationCard[]> => {
78+
const locale = await getLocale()
79+
const t = await getTranslations({
80+
locale,
81+
namespace: "page-10-year-anniversary",
82+
})
83+
return [
84+
{
85+
image: EthereumLaunchImage,
86+
},
87+
{
88+
image: StableCoinImage,
89+
},
90+
{
91+
image: NftImage,
92+
},
93+
{
94+
image: DefiSummerImage,
95+
},
96+
{
97+
image: TheMergeImage,
98+
},
99+
{
100+
image: EthETFImage,
101+
},
102+
].map((card, index) => ({
103+
...card,
104+
title: t(`page-10-year-innovation-card-${index + 1}-title`),
105+
date: t(`page-10-year-innovation-card-${index + 1}-date`),
106+
description1: t(`page-10-year-innovation-card-${index + 1}-description-1`),
107+
description2: t(`page-10-year-innovation-card-${index + 1}-description-2`),
108+
}))
109+
}
110+
111+
export const getAdoptionCards = async (): Promise<AdoptionCard[]> => {
112+
const locale = await getLocale()
113+
const t = await getTranslations({
114+
locale,
115+
namespace: "page-10-year-anniversary",
116+
})
117+
return [
118+
{
119+
image: Adoption1Image,
120+
href: "/resources",
121+
},
122+
{
123+
image: Adoption2Image,
124+
href: "/roadmap",
125+
},
126+
{
127+
image: Adoption3Image,
128+
href: "/stablecoins",
129+
},
130+
{
131+
image: Adoption4Image,
132+
href: "/defi",
133+
},
134+
{
135+
image: Adoption5Image,
136+
href: "/energy-consumption",
137+
},
138+
{
139+
image: Adoption6Image,
140+
href: "/layer-2",
141+
},
142+
].map((card, index) => ({
143+
...card,
144+
title: t(`page-10-year-adoption-card-${index + 1}-title`),
145+
linkText: t(`page-10-year-adoption-card-${index + 1}-link-text`),
146+
// description: Uses htmr, loaded directly with Translation component where consumed
147+
}))
148+
}

0 commit comments

Comments
 (0)