From a668227c4c7d6c7c748edd36a75697ab8e21a93b Mon Sep 17 00:00:00 2001 From: HasithDeAlwis Date: Mon, 2 Dec 2024 17:23:42 -0500 Subject: [PATCH] perf(website)!: slow load times from spline components --- .../feature/events/ui/event.section.tsx | 28 +++++++-------- .../shared/ui/spline/spline-component.tsx | 28 +++++++++------ .../constants/welcome.constants.ts | 28 +++++++-------- .../introduction/mission/mission.section.tsx | 34 +++++++++---------- .../introduction/welcome/welcome.section.tsx | 26 +++++++------- 5 files changed, 75 insertions(+), 69 deletions(-) diff --git a/libs/website/feature/events/ui/event.section.tsx b/libs/website/feature/events/ui/event.section.tsx index 61f4ceff..152744d2 100644 --- a/libs/website/feature/events/ui/event.section.tsx +++ b/libs/website/feature/events/ui/event.section.tsx @@ -1,19 +1,19 @@ -import { SplineComponent } from '@website/shared/ui/spline/spline-component' -import { EVENT_CONSTANTS } from '../constants/event.constants.ts' -import { EventPresenter } from './event-presenter/event-presenter' +/* import { SplineComponent } from '@website/shared/ui/spline/spline-component'; */ +import { EVENT_CONSTANTS } from '../constants/event.constants.ts'; +import { EventPresenter } from './event-presenter/event-presenter'; export function EventSection() { - return ( -
-
-
- -
-
- +
+
+ +
+
+ {/* -
- ) + /> */} + + ); } diff --git a/libs/website/shared/ui/spline/spline-component.tsx b/libs/website/shared/ui/spline/spline-component.tsx index a8444995..529fba13 100644 --- a/libs/website/shared/ui/spline/spline-component.tsx +++ b/libs/website/shared/ui/spline/spline-component.tsx @@ -1,17 +1,23 @@ -import { cn } from '@cuhacking/shared/utils/cn' -import { ErrorBoundary } from '@cuhacking/shared/utils/ErrorBoundary' -import { lazy, Suspense } from 'react' +import { cn } from '@cuhacking/shared/utils/cn'; +/* import { ErrorBoundary } from '@cuhacking/shared/utils/ErrorBoundary' */ +import { lazy, Suspense } from 'react'; -const Spline = lazy(() => import('@splinetool/react-spline')) +const Spline = lazy(() => import('@splinetool/react-spline')); -export function SplineComponent({ link, className }: { link: string, className: string }) { +export function SplineComponent({ + link, + className, +}: { + link: string; + className: string; +}) { return (
- - Loading...
}> - - - + {/* */} + Loading...}> + + + {/* */} - ) + ); } diff --git a/libs/website/ui/introduction/constants/welcome.constants.ts b/libs/website/ui/introduction/constants/welcome.constants.ts index f0823ba4..98cf1fea 100644 --- a/libs/website/ui/introduction/constants/welcome.constants.ts +++ b/libs/website/ui/introduction/constants/welcome.constants.ts @@ -1,18 +1,18 @@ -import discord_green from '@cuhacking/shared/assets/icons/socials/discord-green-1.svg' -import docs_green from '@cuhacking/shared/assets/icons/socials/docs-green-1.svg' -import email_green from '@cuhacking/shared/assets/icons/socials/email-green-1.svg' -import figma_green from '@cuhacking/shared/assets/icons/socials/figma-green-1.svg' -import github_green from '@cuhacking/shared/assets/icons/socials/github-green-1.svg' -import instagram_green from '@cuhacking/shared/assets/icons/socials/instagram-green-1.svg' -import linkedin_green from '@cuhacking/shared/assets/icons/socials/linkedin-green-1.svg' -import linktree_green from '@cuhacking/shared/assets/icons/socials/linktree-green-1.svg' +import discord_green from '@cuhacking/shared/assets/icons/socials/discord-green-1.svg'; +import docs_green from '@cuhacking/shared/assets/icons/socials/docs-green-1.svg'; +import email_green from '@cuhacking/shared/assets/icons/socials/email-green-1.svg'; +import figma_green from '@cuhacking/shared/assets/icons/socials/figma-green-1.svg'; +import github_green from '@cuhacking/shared/assets/icons/socials/github-green-1.svg'; +import instagram_green from '@cuhacking/shared/assets/icons/socials/instagram-green-1.svg'; +import linkedin_green from '@cuhacking/shared/assets/icons/socials/linkedin-green-1.svg'; +import linktree_green from '@cuhacking/shared/assets/icons/socials/linktree-green-1.svg'; interface Media { - src: string - alt: string + src: string; + alt: string; } -const socials: { link: string, media: Media }[] = [ +const socials: { link: string; media: Media }[] = [ { link: 'https://www.instagram.com/cuhacking/', media: { src: instagram_green, alt: 'Instagram' }, @@ -45,7 +45,7 @@ const socials: { link: string, media: Media }[] = [ link: 'https://linktr.ee/cuhacking_?fbclid=PAZXh0bgNhZW0CMTEAAaZcB9hM3ZkwE4vR0NjpoFmPrg3gfXxlm5NdhqMy-eKHv-VXw8ekbvCznlM_aem_wSxlDGzbFI7sVeAAUVTAoQ', media: { src: linktree_green, alt: 'Linktree' }, }, -] -export const WELCOME_CONSTATNTS = { +]; +export const WELCOME_CONSTANTS = { SOCIALS: socials, -} +}; diff --git a/libs/website/ui/introduction/mission/mission.section.tsx b/libs/website/ui/introduction/mission/mission.section.tsx index 9897171b..b1247141 100644 --- a/libs/website/ui/introduction/mission/mission.section.tsx +++ b/libs/website/ui/introduction/mission/mission.section.tsx @@ -1,22 +1,22 @@ -import { SplineComponent } from '@website/shared/ui/spline/spline-component' -import { MISSION_CONSTANTS } from '../constants/mission.constants' -import { Mission } from './mission' +/* import { SplineComponent } from '@website/shared/ui/spline/spline-component'; */ +import { MISSION_CONSTANTS } from '../constants/mission.constants'; +import { Mission } from './mission'; export function MissionSection() { - return ( -
- + {/* -
-
- -
-
-
- ) + /> */} +
+
+ +
+
+ + ); } diff --git a/libs/website/ui/introduction/welcome/welcome.section.tsx b/libs/website/ui/introduction/welcome/welcome.section.tsx index 49afcb46..66e9988d 100644 --- a/libs/website/ui/introduction/welcome/welcome.section.tsx +++ b/libs/website/ui/introduction/welcome/welcome.section.tsx @@ -1,19 +1,19 @@ -import { SplineComponent } from '@website/shared/ui/spline/spline-component' -import { WELCOME_CONSTATNTS } from '../constants/welcome.constants' -import { Welcome } from './welcome' +/* import { SplineComponent } from '@website/shared/ui/spline/spline-component'; */ +import { WELCOME_CONSTANTS } from '../constants/welcome.constants'; +import { Welcome } from './welcome'; export function WelcomeSection() { - return ( -
- + {/* -
-
- + /> */} +
+
+ +
+
-
-
- ) + ); }