-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf(website)!: slow load times from spline components
- Loading branch information
1 parent
1a5600d
commit a668227
Showing
5 changed files
with
75 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section id="events" className="relative flex justify-center w-full"> | ||
| <div className="w-full max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <div className="w-full"> | ||
| <EventPresenter events={EVENT_CONSTANTS.EVENTS} /> | ||
| </div> | ||
| </div> | ||
| <SplineComponent | ||
| return ( | ||
| <section id="events" className="relative flex justify-center w-full"> | ||
| <div className="w-full max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <div className="w-full"> | ||
| <EventPresenter events={EVENT_CONSTANTS.EVENTS} /> | ||
| </div> | ||
| </div> | ||
| {/* <SplineComponent | ||
| link="https://prod.spline.design/ApEljaMrr9NQtUwP/scene.splinecode" | ||
| className="absolute -bottom-[15vh] lg:-bottom-[5vh] left-0 scale-1 md:scale-[1.2] z-[-1]" | ||
| /> | ||
| </section> | ||
| ) | ||
| /> */} | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="overflow-x-hidden"> | ||
| <ErrorBoundary> | ||
| <Suspense fallback={<div>Loading...</div>}> | ||
| <Spline className={cn(className)} scene={link} /> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| {/* <ErrorBoundary> */} | ||
| <Suspense fallback={<div>Loading...</div>}> | ||
| <Spline className={cn(className)} scene={link} /> | ||
| </Suspense> | ||
| {/* </ErrorBoundary> */} | ||
| </div> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section id="#about" className="relative flex justify-center w-full"> | ||
| <SplineComponent | ||
| return ( | ||
| <section id="#about" className="relative flex justify-center w-full"> | ||
| {/* <SplineComponent | ||
| className="absolute -bottom-[15vh] lg:-bottom-[5vh] left-0 scale-1 md:scale-[1.2]" | ||
| link="https://prod.spline.design/TGlqj05806lq8PRV/scene.splinecode" | ||
| /> | ||
| <main className="max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <div | ||
| id="about" | ||
| className="relative min-h-[160vh] lg:min-h-screen w-full" | ||
| > | ||
| <Mission logo={MISSION_CONSTANTS.LOGO} /> | ||
| </div> | ||
| </main> | ||
| </section> | ||
| ) | ||
| /> */} | ||
| <main className="max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <div | ||
| id="about" | ||
| className="relative min-h-[160vh] lg:min-h-screen w-full" | ||
| > | ||
| <Mission logo={MISSION_CONSTANTS.LOGO} /> | ||
| </div> | ||
| </main> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section className="relative flex justify-center w-full mx-auto lg:mx-0"> | ||
| <SplineComponent | ||
| return ( | ||
| <section className="relative flex justify-center w-full mx-auto lg:mx-0"> | ||
| {/* <SplineComponent | ||
| className="absolute -bottom-16 lg:left-0 lg:top-0 lg:scale-[1.2]" | ||
| link="https://prod.spline.design/nnjZJFW1wThAacUS/scene.splinecode" | ||
| /> | ||
| <div className="w-full h-screen max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <section className="w-full lg:w-3/5"> | ||
| <Welcome socials={WELCOME_CONSTATNTS.SOCIALS} /> | ||
| /> */} | ||
| <div className="w-full h-screen max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14"> | ||
| <section className="w-full lg:w-3/5"> | ||
| <Welcome socials={WELCOME_CONSTANTS.SOCIALS} /> | ||
| </section> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </section> | ||
| ) | ||
| ); | ||
| } |