Merge branch 'perf/homepage-loading-speed' into perf/homepage-combined

# Conflicts:
#	src/pages/_app.tsx

Author: ashtonanderson

src/components/Common/ErrorBoundary.tsx

@@ -1,11 +1,16 @@
 import Link from 'next/link'
 import Head from 'next/head'
+import dynamic from 'next/dynamic'
 import { Component } from 'react'
-import Chessground from '@react-chess/chessground'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import { trackErrorEncountered } from 'src/lib/analytics'
 
+const ErrorChessground = dynamic(() => import('@react-chess/chessground'), {
+  ssr: false,
+  loading: () => <div className="h-full w-full rounded bg-glass" />,
+})
+
 interface Props {
   children: React.ReactNode
 }
@@ -109,7 +114,7 @@ export class ErrorBoundary extends Component<Props, State> {
             <div className="flex flex-1 flex-col items-center justify-center gap-8 p-6">
               <div className="flex max-w-2xl flex-col items-center gap-6 text-center">
                 <div className="h-[200px] w-[200px] opacity-75">
-                  <Chessground
+                  <ErrorChessground
                     contained
                     config={{
                       fen: 'rn1qkb1r/ppp1pBpp/5n2/4N3/8/2N5/PPPP1PPP/R1BbK2R b KQkq - 0 7',

src/components/Common/FeedbackButton.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { AuthContext } from 'src/contexts'
+import { AuthContext } from 'src/contexts/AuthContext'
 
 export const FeedbackButton: React.FC = () => {
   const { user } = useContext(AuthContext)

src/components/Common/PlaySetupModal.tsx

@@ -12,7 +12,7 @@ import {
   TimeControlOptionNames,
   TimeControlOptions,
 } from 'src/types'
-import { ModalContext } from 'src/contexts'
+import { ModalContext } from 'src/contexts/ModalContext'
 import { ModalContainer } from './ModalContainer'
 
 const maiaOptions = [
@@ -72,7 +72,7 @@ function OptionSelect<T>({
   )
 }
 
-interface Props {
+export interface PlaySetupModalProps {
   playType: PlayType
   player?: Color
   timeControl?: TimeControl
@@ -89,7 +89,9 @@ interface Props {
   modalSubtitle?: string
 }
 
-export const PlaySetupModal: React.FC<Props> = (props: Props) => {
+export const PlaySetupModal: React.FC<PlaySetupModalProps> = (
+  props: PlaySetupModalProps,
+) => {
   const { setPlaySetupModalProps } = useContext(ModalContext)
   const router = useRouter()
   const { push } = router

src/components/Home/GameCarousel.tsx

@@ -181,7 +181,10 @@ export const GameCarousel: React.FC = () => {
   const router = useRouter()
   const [games, setGames] = useState<GameData[]>(SAMPLE_GAMES)
   const [isPaused, setIsPaused] = useState(false)
+  const [isCarouselVisible, setIsCarouselVisible] = useState(false)
+  const [shouldLoadLiveGames, setShouldLoadLiveGames] = useState(false)
   const abortController = useRef<AbortController | null>(null)
+  const sectionRef = useRef<HTMLElement>(null)
   const carouselRef = useRef<HTMLDivElement>(null)
 
   const handleGameStart = useCallback((gameData: StreamedGame) => {
@@ -300,7 +303,7 @@ export const GameCarousel: React.FC = () => {
   }, [])
 
   useEffect(() => {
-    if (isPaused || !carouselRef.current) return
+    if (isPaused || !isCarouselVisible || !carouselRef.current) return
 
     const scroll = () => {
       if (carouselRef.current) {
@@ -317,18 +320,74 @@ export const GameCarousel: React.FC = () => {
 
     const interval = setInterval(scroll, 20)
     return () => clearInterval(interval)
-  }, [isPaused])
+  }, [isPaused, isCarouselVisible])
 
   useEffect(() => {
-    fetchNewGame()
-    fetchBroadcast()
+    const section = sectionRef.current
+
+    if (!section || typeof IntersectionObserver === 'undefined') {
+      setIsCarouselVisible(true)
+      setShouldLoadLiveGames(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsCarouselVisible(entry.isIntersecting)
+
+        if (entry.isIntersecting) {
+          setShouldLoadLiveGames(true)
+        }
+      },
+      { rootMargin: '300px 0px' },
+    )
+
+    observer.observe(section)
+
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!shouldLoadLiveGames) return
+
+    const startLiveFeeds = () => {
+      fetchNewGame()
+      fetchBroadcast()
+    }
+
+    const windowWithIdleCallback = window as Window & {
+      requestIdleCallback?: (
+        callback: IdleRequestCallback,
+        options?: IdleRequestOptions,
+      ) => number
+      cancelIdleCallback?: (handle: number) => void
+    }
+
+    if (windowWithIdleCallback.requestIdleCallback) {
+      const idleHandle = windowWithIdleCallback.requestIdleCallback(
+        startLiveFeeds,
+        {
+          timeout: 2500,
+        },
+      )
+
+      return () => {
+        windowWithIdleCallback.cancelIdleCallback?.(idleHandle)
+        if (abortController.current) {
+          abortController.current.abort()
+        }
+      }
+    }
+
+    const timeoutId = window.setTimeout(startLiveFeeds, 1000)
 
     return () => {
+      window.clearTimeout(timeoutId)
       if (abortController.current) {
         abortController.current.abort()
       }
     }
-  }, [fetchNewGame, fetchBroadcast])
+  }, [fetchNewGame, fetchBroadcast, shouldLoadLiveGames])
 
   const handleGameClick = useCallback(
     (game: GameData) => {
@@ -340,7 +399,10 @@ export const GameCarousel: React.FC = () => {
   )
 
   return (
-    <section className="relative w-full overflow-y-visible py-6">
+    <section
+      ref={sectionRef}
+      className="relative w-full overflow-y-visible py-6"
+    >
       <div className="relative mb-10 w-full overflow-y-visible">
         <motion.div
           ref={carouselRef}

src/components/Home/HomeHero.tsx

@@ -8,7 +8,8 @@ import {
 
 import { PlayType } from 'src/types'
 import { getGlobalStats } from 'src/api'
-import { AuthContext, ModalContext } from 'src/contexts'
+import { AuthContext } from 'src/contexts/AuthContext'
+import { ModalContext } from 'src/contexts/ModalContext'
 import { AnimatedNumber } from 'src/components/Common/AnimatedNumber'
 
 interface Props {
@@ -125,17 +126,45 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
   // Fetch global stats and set up periodic updates
   useEffect(() => {
     const fetchGlobalStats = async () => {
-      const data = await getGlobalStats()
-      setGlobalStats(data)
+      try {
+        const data = await getGlobalStats()
+        setGlobalStats(data)
+      } catch (error) {
+        console.error('Error fetching global stats:', error)
+      }
+    }
+
+    const windowWithIdleCallback = window as Window & {
+      requestIdleCallback?: (
+        callback: IdleRequestCallback,
+        options?: IdleRequestOptions,
+      ) => number
+      cancelIdleCallback?: (handle: number) => void
     }
 
-    // Fetch immediately
-    fetchGlobalStats()
+    const idleHandle = windowWithIdleCallback.requestIdleCallback?.(
+      fetchGlobalStats,
+      {
+        timeout: 2000,
+      },
+    )
+    const timeoutId =
+      idleHandle === undefined
+        ? window.setTimeout(fetchGlobalStats, 800)
+        : undefined
 
     // Update every 5 minutes
     const interval = setInterval(fetchGlobalStats, 5 * 60 * 1000)
 
-    return () => clearInterval(interval)
+    return () => {
+      if (idleHandle !== undefined) {
+        windowWithIdleCallback.cancelIdleCallback?.(idleHandle)
+      }
+      if (timeoutId !== undefined) {
+        window.clearTimeout(timeoutId)
+      }
+      clearInterval(interval)
+    }
   }, [])
 
   return (

src/components/Home/Sections/AdditionalFeaturesSection.tsx

@@ -3,7 +3,7 @@ import { useContext, ReactNode } from 'react'
 import { motion } from 'framer-motion'
 import { useInView } from 'react-intersection-observer'
 
-import { ModalContext } from 'src/contexts'
+import { ModalContext } from 'src/contexts/ModalContext'
 import { PlayType } from 'src/types'
 import { StarIcon, BrainIcon, BotOrNotIcon } from 'src/components/Common/Icons'
 

src/components/Home/Sections/PlaySection.tsx

@@ -6,7 +6,8 @@ import type { DrawShape } from 'chessground/draw'
 import Chessground from '@react-chess/chessground'
 import { useInView } from 'react-intersection-observer'
 import { useContext, useState, useEffect } from 'react'
-import { ModalContext, AuthContext } from 'src/contexts'
+import { AuthContext } from 'src/contexts/AuthContext'
+import { ModalContext } from 'src/contexts/ModalContext'
 
 const DEMO_POSITION = {
   fen: 'r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/3P1N2/PPP2PPP/RNBQK2R b KQkq - 0 1',

src/contexts/ModalContext.tsx

@@ -1,13 +1,22 @@
-import { PlaySetupModal } from 'src/components'
-import React, { ComponentProps, ReactNode, useState } from 'react'
+import dynamic from 'next/dynamic'
+import React, { ReactNode, useState } from 'react'
+import type { PlaySetupModalProps } from 'src/components/Common/PlaySetupModal'
+
+const PlaySetupModal = dynamic(
+  () =>
+    import('src/components/Common/PlaySetupModal').then(
+      (mod) => mod.PlaySetupModal,
+    ),
+  { ssr: false },
+)
 
 const fn = () => {
   throw new Error('poorly provided ModalContext')
 }
 
 interface IModalContext {
-  playSetupModalProps?: ComponentProps<typeof PlaySetupModal>
-  setPlaySetupModalProps: (arg0?: ComponentProps<typeof PlaySetupModal>) => void
+  playSetupModalProps?: PlaySetupModalProps
+  setPlaySetupModalProps: (arg0?: PlaySetupModalProps) => void
 }
 
 export const ModalContext = React.createContext<IModalContext>({
@@ -20,7 +29,7 @@ export const ModalContextProvider: React.FC<{ children: ReactNode }> = ({
   children: ReactNode
 }) => {
   const [playSetupModalProps, setPlaySetupModalProps] = useState<
-    ComponentProps<typeof PlaySetupModal> | undefined
+    PlaySetupModalProps | undefined
   >(undefined)
 
   return (