From 678b94d581ce6e99c9d3a3440bd920557b58183e Mon Sep 17 00:00:00 2001
From: Mumtahin Farabi <mfarabi619@gmail.com>
Date: Mon, 2 Dec 2024 04:13:31 -0500
Subject: [PATCH] perf(web): lazy load spline and remove unnecessary react
 imports

---
 libs/shared/ui/accordion/accordion.stories.tsx   |  1 -
 .../ui/glassmorphic-card/glassmorphic-card.tsx   |  1 -
 .../ui/terminal-text/terminal-text.stories.tsx   |  1 -
 libs/shared/ui/terminal-text/terminal-text.tsx   |  1 -
 .../ui/event-presenter/event-presenter.tsx       |  1 -
 libs/website/feature/events/ui/event.section.tsx | 16 +++++-----------
 libs/website/layouts/base.tsx                    |  1 -
 libs/website/pages/home.tsx                      |  1 -
 .../ui/navigation/navbar/ui/navbar.presenter.tsx |  2 +-
 libs/website/shared/ui/socials/socials.tsx       |  1 -
 .../{spline.client.tsx => spline-component.tsx}  | 13 +++++--------
 libs/website/ui/faq/faq-item/faq-item.tsx        |  1 -
 .../ui/faq/faq-presenter/faq.presenter.tsx       |  1 -
 libs/website/ui/faq/faq.section.tsx              |  1 -
 .../ui/introduction/mission/mission.section.tsx  | 16 +++++-----------
 libs/website/ui/introduction/mission/mission.tsx |  1 -
 .../ui/introduction/mission/spline-mission.tsx   | 16 ----------------
 .../ui/introduction/welcome/spline-welcome.tsx   | 14 --------------
 .../ui/introduction/welcome/welcome.section.tsx  | 16 +++++-----------
 libs/website/ui/introduction/welcome/welcome.tsx |  1 -
 .../sponsor-presenter/sponsor-item.tsx           |  1 -
 .../sponsor-presenter/sponsor-presenter.tsx      |  0
 .../sponsor-presenter/sponsor.presenter.tsx      |  1 -
 .../sponsorship.presenter.tsx                    |  1 -
 .../ui/sponsorship/sponsorship-section.tsx       |  1 -
 libs/website/ui/stats/stat-item/stat-item.tsx    |  4 +---
 .../ui/stats/stats-presenter/stats.presenter.tsx |  1 -
 libs/website/ui/stats/stats.section.tsx          |  1 -
 28 files changed, 22 insertions(+), 94 deletions(-)
 rename libs/website/shared/ui/spline/{spline.client.tsx => spline-component.tsx} (55%)
 delete mode 100644 libs/website/ui/introduction/mission/spline-mission.tsx
 delete mode 100644 libs/website/ui/introduction/welcome/spline-welcome.tsx
 delete mode 100644 libs/website/ui/sponsorship/sponsor-presenter/sponsor-presenter.tsx

diff --git a/libs/shared/ui/accordion/accordion.stories.tsx b/libs/shared/ui/accordion/accordion.stories.tsx
index 9427d978..ce364256 100644
--- a/libs/shared/ui/accordion/accordion.stories.tsx
+++ b/libs/shared/ui/accordion/accordion.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion'
 
 const meta = {
diff --git a/libs/shared/ui/glassmorphic-card/glassmorphic-card.tsx b/libs/shared/ui/glassmorphic-card/glassmorphic-card.tsx
index bce17255..e773e806 100644
--- a/libs/shared/ui/glassmorphic-card/glassmorphic-card.tsx
+++ b/libs/shared/ui/glassmorphic-card/glassmorphic-card.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from 'react'
 import InfoIcon from '@cuhacking/shared/assets/icons/general/info-1.svg'
 import { cn } from '@cuhacking/shared/utils/cn'
 import { cva } from 'class-variance-authority'
-import React from 'react'
 
 interface GlassmorphicCardProps {
   children: ReactNode
diff --git a/libs/shared/ui/terminal-text/terminal-text.stories.tsx b/libs/shared/ui/terminal-text/terminal-text.stories.tsx
index 7badc0b8..4135223a 100644
--- a/libs/shared/ui/terminal-text/terminal-text.stories.tsx
+++ b/libs/shared/ui/terminal-text/terminal-text.stories.tsx
@@ -5,7 +5,6 @@ import chevron_down from '@cuhacking/shared/assets/icons/general/chevron-down-1.
 import chevron_up from '@cuhacking/shared/assets/icons/general/chevron-up-1.svg'
 import link from '@cuhacking/shared/assets/icons/general/link-1.svg'
 import phone from '@cuhacking/shared/assets/icons/general/phone-1.svg'
-import React from 'react'
 import { TerminalText } from './terminal-text'
 
 const meta = {
diff --git a/libs/shared/ui/terminal-text/terminal-text.tsx b/libs/shared/ui/terminal-text/terminal-text.tsx
index 0a812173..974f9ffe 100644
--- a/libs/shared/ui/terminal-text/terminal-text.tsx
+++ b/libs/shared/ui/terminal-text/terminal-text.tsx
@@ -2,7 +2,6 @@ import type Media from '@cuhacking/types/media'
 import type { ReactNode } from 'react'
 import { cn } from '@cuhacking/shared/utils/cn'
 import { cva } from 'class-variance-authority'
-import React from 'react'
 import { Icon } from '../icon/icon'
 
 interface TerminalTextProps {
diff --git a/libs/website/feature/events/ui/event-presenter/event-presenter.tsx b/libs/website/feature/events/ui/event-presenter/event-presenter.tsx
index facae41b..b553ac2a 100644
--- a/libs/website/feature/events/ui/event-presenter/event-presenter.tsx
+++ b/libs/website/feature/events/ui/event-presenter/event-presenter.tsx
@@ -1,6 +1,5 @@
 import type { Event } from '../../types/event'
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
-import React from 'react'
 import { EventItem } from '../event-item/event-item'
 
 interface EventContainerProps {
diff --git a/libs/website/feature/events/ui/event.section.tsx b/libs/website/feature/events/ui/event.section.tsx
index bc2e5dfc..61f4ceff 100644
--- a/libs/website/feature/events/ui/event.section.tsx
+++ b/libs/website/feature/events/ui/event.section.tsx
@@ -1,6 +1,4 @@
-import { SplineComponent } from '@website/shared/ui/spline/spline.client'
-import React from 'react'
-import { ClientOnly } from 'remix-utils/client-only'
+import { SplineComponent } from '@website/shared/ui/spline/spline-component'
 import { EVENT_CONSTANTS } from '../constants/event.constants.ts'
 import { EventPresenter } from './event-presenter/event-presenter'
 
@@ -12,14 +10,10 @@ export function EventSection() {
           <EventPresenter events={EVENT_CONSTANTS.EVENTS} />
         </div>
       </div>
-      <ClientOnly>
-        {() => (
-          <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]"
-          />
-        )}
-      </ClientOnly>
+      <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>
   )
 }
diff --git a/libs/website/layouts/base.tsx b/libs/website/layouts/base.tsx
index 95c2a054..8f8966b6 100644
--- a/libs/website/layouts/base.tsx
+++ b/libs/website/layouts/base.tsx
@@ -4,7 +4,6 @@ import {
   NAVBAR_CONSTANTS,
   NavbarContainer,
 } from '@website/shared/ui/navigation'
-import React from 'react'
 import { ClientOnly } from 'remix-utils/client-only'
 
 export function Layout({ children }) {
diff --git a/libs/website/pages/home.tsx b/libs/website/pages/home.tsx
index f922066b..56baaa36 100644
--- a/libs/website/pages/home.tsx
+++ b/libs/website/pages/home.tsx
@@ -3,7 +3,6 @@ import { Layout } from '@website/layouts/base'
 import { FAQSection } from '@website/ui/faq'
 import { MissionSection, WelcomeSection } from '@website/ui/introduction'
 import { SponsorshipSection } from '@website/ui/sponsorship'
-import React from 'react'
 
 export function Home() {
   return (
diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
index 94bf005b..d314bdeb 100644
--- a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
+++ b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
@@ -12,7 +12,7 @@ import {
 } from '@cuhacking/shared/ui/navigation-menu'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { Link } from '@remix-run/react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Socials } from '../../../socials'
 import { NavItem } from './nav-item'
 import { MobileNavItem } from './nav-item-mobile'
diff --git a/libs/website/shared/ui/socials/socials.tsx b/libs/website/shared/ui/socials/socials.tsx
index 47d9edca..def88086 100644
--- a/libs/website/shared/ui/socials/socials.tsx
+++ b/libs/website/shared/ui/socials/socials.tsx
@@ -2,7 +2,6 @@ import type { Media } from '@cuhacking/shared/types/media'
 import { Icon } from '@cuhacking/shared/ui/icon'
 import { cn } from '@cuhacking/shared/utils/cn'
 import { Link } from '@remix-run/react'
-import React from 'react'
 
 interface SocialsProps {
   socials: {
diff --git a/libs/website/shared/ui/spline/spline.client.tsx b/libs/website/shared/ui/spline/spline-component.tsx
similarity index 55%
rename from libs/website/shared/ui/spline/spline.client.tsx
rename to libs/website/shared/ui/spline/spline-component.tsx
index b10d45c0..a8444995 100644
--- a/libs/website/shared/ui/spline/spline.client.tsx
+++ b/libs/website/shared/ui/spline/spline-component.tsx
@@ -1,17 +1,14 @@
 import { cn } from '@cuhacking/shared/utils/cn'
 import { ErrorBoundary } from '@cuhacking/shared/utils/ErrorBoundary'
-import Spline from '@splinetool/react-spline'
-import React, { Suspense } from 'react'
+import { lazy, Suspense } from 'react'
 
-interface SplineComponentProps {
-  link: string
-  className: string
-}
-export function SplineComponent({ link, className }: SplineComponentProps) {
+const Spline = lazy(() => import('@splinetool/react-spline'))
+
+export function SplineComponent({ link, className }: { link: string, className: string }) {
   return (
     <div className="overflow-x-hidden">
       <ErrorBoundary>
-        <Suspense>
+        <Suspense fallback={<div>Loading...</div>}>
           <Spline className={cn(className)} scene={link} />
         </Suspense>
       </ErrorBoundary>
diff --git a/libs/website/ui/faq/faq-item/faq-item.tsx b/libs/website/ui/faq/faq-item/faq-item.tsx
index c6325eb4..6bfcb358 100644
--- a/libs/website/ui/faq/faq-item/faq-item.tsx
+++ b/libs/website/ui/faq/faq-item/faq-item.tsx
@@ -4,7 +4,6 @@ import {
   AccordionTrigger,
 } from '@cuhacking/shared/ui/accordion'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
-import React from 'react'
 
 interface FAQItemProps {
   question: string
diff --git a/libs/website/ui/faq/faq-presenter/faq.presenter.tsx b/libs/website/ui/faq/faq-presenter/faq.presenter.tsx
index 7a5ed3af..f74c6083 100644
--- a/libs/website/ui/faq/faq-presenter/faq.presenter.tsx
+++ b/libs/website/ui/faq/faq-presenter/faq.presenter.tsx
@@ -2,7 +2,6 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@c
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
 import { Link } from '@remix-run/react'
-import React from 'react'
 import { FAQItem } from '../faq-item/faq-item'
 
 interface FAQPresenterProps {
diff --git a/libs/website/ui/faq/faq.section.tsx b/libs/website/ui/faq/faq.section.tsx
index dfec2236..83930450 100644
--- a/libs/website/ui/faq/faq.section.tsx
+++ b/libs/website/ui/faq/faq.section.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { FAQ_CONSTANTS } from './constants/faq.constants'
 import { FAQPresenter } from './faq-presenter/faq.presenter'
 
diff --git a/libs/website/ui/introduction/mission/mission.section.tsx b/libs/website/ui/introduction/mission/mission.section.tsx
index d657b8cd..9897171b 100644
--- a/libs/website/ui/introduction/mission/mission.section.tsx
+++ b/libs/website/ui/introduction/mission/mission.section.tsx
@@ -1,20 +1,14 @@
-import { SplineComponent } from '@website/shared/ui/spline/spline.client'
-import React from 'react'
-import { ClientOnly } from 'remix-utils/client-only'
+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">
-      <ClientOnly>
-        {() => (
-          <SplineComponent
-            className="absolute -bottom-[15vh] lg:-bottom-[5vh] left-0 scale-1 md:scale-[1.2]"
-            link="https://prod.spline.design/TGlqj05806lq8PRV/scene.splinecode"
-          />
-        )}
-      </ClientOnly>
+      <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"
diff --git a/libs/website/ui/introduction/mission/mission.tsx b/libs/website/ui/introduction/mission/mission.tsx
index 4b98cc87..d737a1cc 100644
--- a/libs/website/ui/introduction/mission/mission.tsx
+++ b/libs/website/ui/introduction/mission/mission.tsx
@@ -1,7 +1,6 @@
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { Separator } from '@cuhacking/shared/ui/separator'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
-import React from 'react'
 
 interface MissionProps {
   logo: string
diff --git a/libs/website/ui/introduction/mission/spline-mission.tsx b/libs/website/ui/introduction/mission/spline-mission.tsx
deleted file mode 100644
index 80004001..00000000
--- a/libs/website/ui/introduction/mission/spline-mission.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Suspense } from 'react'
-
-const Spline = React.lazy(() => import('@splinetool/react-spline'))
-
-export function SplineMission() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <div className="overflow-x-hidden">
-        <Spline
-          className="absolute -bottom-[15vh] lg:-bottom-[5vh] left-0 scale-1 md:scale-[1.2]"
-          scene="https://prod.spline.design/TGlqj05806lq8PRV/scene.splinecode"
-        />
-      </div>
-    </Suspense>
-  )
-}
diff --git a/libs/website/ui/introduction/welcome/spline-welcome.tsx b/libs/website/ui/introduction/welcome/spline-welcome.tsx
deleted file mode 100644
index 9a43f138..00000000
--- a/libs/website/ui/introduction/welcome/spline-welcome.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Suspense } from 'react'
-
-const Spline = React.lazy(() => import('@splinetool/react-spline'))
-
-export function SplineWelcome() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Spline
-        className="absolute top-0 lg:scale-[1.2]"
-        scene="https://prod.spline.design/nnjZJFW1wThAacUS/scene.splinecode"
-      />
-    </Suspense>
-  )
-}
diff --git a/libs/website/ui/introduction/welcome/welcome.section.tsx b/libs/website/ui/introduction/welcome/welcome.section.tsx
index 7f0800f4..49afcb46 100644
--- a/libs/website/ui/introduction/welcome/welcome.section.tsx
+++ b/libs/website/ui/introduction/welcome/welcome.section.tsx
@@ -1,20 +1,14 @@
-import { SplineComponent } from '@website/shared/ui/spline/spline.client'
-import React from 'react'
-import { ClientOnly } from 'remix-utils/client-only'
+import { SplineComponent } from '@website/shared/ui/spline/spline-component'
 import { WELCOME_CONSTATNTS } 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">
-      <ClientOnly>
-        {() => (
-          <SplineComponent
-            className="absolute -bottom-16 lg:left-0 lg:top-0 lg:scale-[1.2]"
-            link="https://prod.spline.design/nnjZJFW1wThAacUS/scene.splinecode"
-          />
-        )}
-      </ClientOnly>
+      <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} />
diff --git a/libs/website/ui/introduction/welcome/welcome.tsx b/libs/website/ui/introduction/welcome/welcome.tsx
index d78f83c2..b2dff3ea 100644
--- a/libs/website/ui/introduction/welcome/welcome.tsx
+++ b/libs/website/ui/introduction/welcome/welcome.tsx
@@ -1,7 +1,6 @@
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
 import { Socials } from '@website/shared/ui/socials'
-import React from 'react'
 
 interface Media {
   src: string
diff --git a/libs/website/ui/sponsorship/sponsor-presenter/sponsor-item.tsx b/libs/website/ui/sponsorship/sponsor-presenter/sponsor-item.tsx
index d67392aa..0b3bce8d 100644
--- a/libs/website/ui/sponsorship/sponsor-presenter/sponsor-item.tsx
+++ b/libs/website/ui/sponsorship/sponsor-presenter/sponsor-item.tsx
@@ -2,7 +2,6 @@ import type { Sponsor } from '../types/sponsorship'
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { cn } from '@cuhacking/shared/utils/cn'
 import { cva } from 'class-variance-authority'
-import React from 'react'
 
 interface SponsorPresenterProps {
   sponsor: Sponsor
diff --git a/libs/website/ui/sponsorship/sponsor-presenter/sponsor-presenter.tsx b/libs/website/ui/sponsorship/sponsor-presenter/sponsor-presenter.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/libs/website/ui/sponsorship/sponsor-presenter/sponsor.presenter.tsx b/libs/website/ui/sponsorship/sponsor-presenter/sponsor.presenter.tsx
index 095c635c..a58bb262 100644
--- a/libs/website/ui/sponsorship/sponsor-presenter/sponsor.presenter.tsx
+++ b/libs/website/ui/sponsorship/sponsor-presenter/sponsor.presenter.tsx
@@ -1,6 +1,5 @@
 import type { Sponsor } from '../../types/sponsorship'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
-import React from 'react'
 import { SponsorItem } from './sponsor-item'
 
 interface SponsorDisplayProps {
diff --git a/libs/website/ui/sponsorship/sponsorship-presenter/sponsorship.presenter.tsx b/libs/website/ui/sponsorship/sponsorship-presenter/sponsorship.presenter.tsx
index 888face4..be196f8a 100644
--- a/libs/website/ui/sponsorship/sponsorship-presenter/sponsorship.presenter.tsx
+++ b/libs/website/ui/sponsorship/sponsorship-presenter/sponsorship.presenter.tsx
@@ -3,7 +3,6 @@ import { Button } from '@cuhacking/shared/ui/button'
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { TerminalText } from '@cuhacking/shared/ui/terminal-text'
 import { Link } from '@remix-run/react'
-import React from 'react'
 import { SponsorPresenter } from '../sponsor-presenter/sponsor.presenter'
 
 interface SponsorshipContainerProps {
diff --git a/libs/website/ui/sponsorship/sponsorship-section.tsx b/libs/website/ui/sponsorship/sponsorship-section.tsx
index ea761dfa..2c94a699 100644
--- a/libs/website/ui/sponsorship/sponsorship-section.tsx
+++ b/libs/website/ui/sponsorship/sponsorship-section.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { SPONSORSHIP_CONSTANTS } from './constants/sponsorship.constants'
 import { SponsorshipPresenter } from './sponsorship-presenter/sponsorship.presenter'
 
diff --git a/libs/website/ui/stats/stat-item/stat-item.tsx b/libs/website/ui/stats/stat-item/stat-item.tsx
index 8e86bd90..bb2d2369 100644
--- a/libs/website/ui/stats/stat-item/stat-item.tsx
+++ b/libs/website/ui/stats/stat-item/stat-item.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 interface StatsProps {
   imgUrl: string
   title: string
@@ -14,7 +12,7 @@ export function StatItem({ imgUrl, title }: StatsProps) {
         loading="lazy"
         alt={`${title} icon`}
       />
-      <p className="font-sans text-lg font-medium">{title}</p>
+      <p className="text-lg font-medium">{title}</p>
     </div>
   )
 }
diff --git a/libs/website/ui/stats/stats-presenter/stats.presenter.tsx b/libs/website/ui/stats/stats-presenter/stats.presenter.tsx
index d4f09aea..600b9251 100644
--- a/libs/website/ui/stats/stats-presenter/stats.presenter.tsx
+++ b/libs/website/ui/stats/stats-presenter/stats.presenter.tsx
@@ -1,5 +1,4 @@
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
-import React from 'react'
 import { StatItem } from '../stat-item/stat-item'
 
 interface StatContainerProps {
diff --git a/libs/website/ui/stats/stats.section.tsx b/libs/website/ui/stats/stats.section.tsx
index ad147959..8f95de3b 100644
--- a/libs/website/ui/stats/stats.section.tsx
+++ b/libs/website/ui/stats/stats.section.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { STATS_CONSTANTS } from './constants/stats.constants'
 import { StatPresenter } from './stats-presenter/stats.presenter'