perf(web): lazy load spline and remove unnecessary react imports

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 = {

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

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 = {

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 {

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 {

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>
   )
 }

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 }) {

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 (

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'

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: {

libs/website/shared/ui/spline/spline.client.tsx → 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>

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

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 {

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'
 

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"

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

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} />

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

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

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 {

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 {

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'
 

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>
   )
 }

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 {

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'