Preformace Improvement + Code QOF Commits

Author: srcoggin

website-ts/src/app/fantasy-football/page.tsx

@@ -66,17 +66,17 @@ export default function FantasyFootball() {
     {
       id: 'rookie-talk',
       label: <><IconRookie size={18} className="flex-shrink-0" /> Rookie Talk</>,
-      content: <RookieTalk />,
+      content: () => <RookieTalk />,
     },
     {
       id: 'radar',
       label: <><IconRadar size={18} className="flex-shrink-0" /> Fantasy Radar</>,
-      content: <FantasyRadar data={data} />,
+      content: () => <FantasyRadar data={data} />,
     },
     {
       id: 'deep-dive',
       label: <><IconDeepDive size={18} className="flex-shrink-0" /> Deep Dive Tool</>,
-      content: <DeepDive data={data} />,
+      content: () => <DeepDive data={data} />,
     },
   ]
 

website-ts/src/app/news/[slug]/page.tsx

@@ -4,22 +4,26 @@ import path from 'path'
 import ArticleViewer from '@/components/news/ArticleViewer'
 import { ArticlesIndex } from '@/types'
 
-// Generate static params for all articles
 export async function generateStaticParams() {
+    const slugs: { slug: string }[] = []
     try {
         const indexPath = path.join(process.cwd(), 'public', 'json_data', 'articles_index.json')
         if (fs.existsSync(indexPath)) {
             const content = fs.readFileSync(indexPath, 'utf-8')
             const data: ArticlesIndex = JSON.parse(content)
-            return data.articles.map((article) => ({
-                slug: article.slug,
-            }))
+            slugs.push(...data.articles.map((article) => ({ slug: article.slug })))
         }
-        return []
     } catch (error) {
         console.error('Error generating static params:', error)
-        return []
     }
+    // Next.js 14 with output:'export' treats an empty return as "missing
+    // generateStaticParams" (it checks prerenderRoutes.length, not function
+    // existence). A fallback slug keeps the build passing when 0 articles exist;
+    // ArticleViewer already handles unknown slugs gracefully.
+    if (slugs.length === 0) {
+        slugs.push({ slug: '_' })
+    }
+    return slugs
 }
 
 export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {

website-ts/src/components/Autocomplete.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useMemo } from 'react'
 import { IconChevronDown } from '@/components/Icons'
 
 interface Option {
@@ -37,12 +37,11 @@ export default function Autocomplete({
   // Find selected option label
   const selectedOption = options.find(o => o.value === value)
 
-  // Filter options based on input
-  const filteredOptions = inputValue.trim() === ''
-    ? options
-    : options.filter(o =>
-      o.label.toLowerCase().includes(inputValue.toLowerCase())
-    )
+  const filteredOptions = useMemo(() => {
+    if (inputValue.trim() === '') return options
+    const query = inputValue.toLowerCase()
+    return options.filter(o => o.label.toLowerCase().includes(query))
+  }, [options, inputValue])
 
   // Update input value when selection changes externally
   useEffect(() => {

website-ts/src/components/DataTable.tsx

@@ -25,6 +25,13 @@ interface DataTableProps<T> {
   columnGradients?: Record<string, ColumnGradientDirection>
 }
 
+function getValueRaw<T>(row: T, key: string): any {
+  const keys = key.split('.')
+  let value: any = row
+  for (const k of keys) value = value?.[k]
+  return value
+}
+
 export default function DataTable<T extends Record<string, any>>({
   data,
   columns,
@@ -49,13 +56,6 @@ export default function DataTable<T extends Record<string, any>>({
     return 0.1 + ((value - minVal) / (maxVal - minVal)) * 0.4
   }
 
-  function getValueRaw(row: T, key: string): any {
-    const keys = key.split('.')
-    let value: any = row
-    for (const k of keys) value = value?.[k]
-    return value
-  }
-
   const columnMinMax = React.useMemo(() => {
     if (!columnGradients || Object.keys(columnGradients).length === 0) return {}
     const result: Record<string, { min: number; max: number }> = {}
@@ -85,8 +85,6 @@ export default function DataTable<T extends Record<string, any>>({
     }
   }
 
-  const getValue = (row: T, key: string): any => getValueRaw(row, key)
-
   return (
     <div
       className={`overflow-x-auto rounded-lg border border-[var(--border-color)] ${className}`}
@@ -137,7 +135,7 @@ export default function DataTable<T extends Record<string, any>>({
               >
                 {columns.map(col => {
                   const colKey = String(col.key)
-                  const rawValue = getValue(row, colKey)
+                  const rawValue = getValueRaw(row, colKey)
                   const displayValue = col.format ? col.format(rawValue, row) : rawValue
                   const cellClass = col.cellClass ? col.cellClass(rawValue, row) : ''
                   const isTextOnlyClass = cellClass && !cellClass.includes('bg-')

website-ts/src/components/PlaybookBackground.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState, useCallback } from 'react'
 
-// Unique ID counter
 let routeIdCounter = 0
 
 interface Route {
@@ -21,12 +20,16 @@ const MOBILE_ACTIVE_MAX = 5
 const DESKTOP_ACTIVE_MIN = 12
 const DESKTOP_ACTIVE_MAX = 16
 
+function random(min: number, max: number) { return Math.random() * (max - min) + min }
+function randomInt(min: number, max: number) { return Math.floor(random(min, max)) }
+function safeX(val: number) { return Math.min(Math.max(val, 3), 97) }
+function safeY(val: number) { return Math.min(Math.max(val, 3), 94) }
+
 export default function PlaybookBackground() {
     const [routes, setRoutes] = useState<Route[]>([])
     const [isMobile, setIsMobile] = useState(false)
     const [hasMeasured, setHasMeasured] = useState(false)
 
-    // Detect mobile viewport
     useEffect(() => {
         const check = () => {
             if (typeof window !== 'undefined') {
@@ -39,13 +42,6 @@ export default function PlaybookBackground() {
         return () => window.removeEventListener('resize', check)
     }, [])
 
-    // --- HELPERS ---
-    const random = useCallback((min: number, max: number) => Math.random() * (max - min) + min, [])
-    const randomInt = useCallback((min: number, max: number) => Math.floor(random(min, max)), [random])
-    const safeX = useCallback((val: number) => Math.min(Math.max(val, 3), 97), [])
-    const safeY = useCallback((val: number) => Math.min(Math.max(val, 3), 94), [])
-
-    // --- CREATE ROUTE ---
     const createRoute = useCallback((slotIndex: number, neighbors: (number | undefined)[], initialDelay: boolean, slotCount: number): Route => {
         const slotWidth = 100 / slotCount
         const slotBase = (slotIndex * slotWidth) + (slotWidth / 2)
@@ -146,7 +142,7 @@ export default function PlaybookBackground() {
             type,
             slotIndex
         }
-    }, [random, randomInt, safeX, safeY])
+    }, [])
 
     // --- INITIAL MOUNT ---
     useEffect(() => {

website-ts/src/components/PlayerHeadshot.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState } from 'react'
 import Image from 'next/image'
-import { getHeadshotPath, didHeadshotFail, getFallbackHeadshot } from '@/utils/dataLoader'
+import { getHeadshotPath } from '@/utils/dataLoader'
 import { IconDevProfile } from '@/components/Icons'
 
 interface PlayerHeadshotProps {
@@ -22,77 +22,32 @@ export default function PlayerHeadshot({
 }: PlayerHeadshotProps) {
     const [hasError, setHasError] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
-    const [isInView, setIsInView] = useState(priority)
-    const imgRef = useRef<HTMLDivElement>(null)
 
     const headshotPath = getHeadshotPath(playerName, position)
 
-    // Check if already known to have failed
-    useEffect(() => {
-        if (didHeadshotFail(headshotPath)) {
-            setHasError(true)
-        }
-    }, [headshotPath])
-
-    // Intersection observer for lazy loading
-    useEffect(() => {
-        if (priority || isInView) return
-
-        const observer = new IntersectionObserver(
-            (entries) => {
-                if (entries[0].isIntersecting) {
-                    setIsInView(true)
-                    observer.disconnect()
-                }
-            },
-            {
-                rootMargin: '100px', // Start loading 100px before in view
-            }
-        )
-
-        if (imgRef.current) {
-            observer.observe(imgRef.current)
-        }
-
-        return () => observer.disconnect()
-    }, [priority, isInView])
-
-    const handleError = () => {
-        setHasError(true)
-    }
-
-    const handleLoad = () => {
-        setIsLoaded(true)
-    }
-
     return (
         <div
-            ref={imgRef}
             className={`relative overflow-hidden rounded-full bg-[var(--bg-secondary)] ${className}`}
             style={{ width: size, height: size }}
         >
-            {/* Skeleton loading state */}
             {!isLoaded && !hasError && (
                 <div className="absolute inset-0 skeleton" />
             )}
 
-            {/* Actual image - only render when in view */}
-            {isInView && !hasError && (
+            {!hasError && (
                 <Image
                     src={headshotPath}
                     alt={`${playerName} headshot`}
                     width={size}
                     height={size}
-                    className={`object-cover transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'
-                        }`}
-                    onError={handleError}
-                    onLoad={handleLoad}
+                    className={`object-cover transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    onError={() => setHasError(true)}
+                    onLoad={() => setIsLoaded(true)}
                     loading={priority ? 'eager' : 'lazy'}
                     unoptimized
                 />
             )}
 
-            {/* Fallback icon on error */}
             {hasError && (
                 <div className="absolute inset-0 flex items-center justify-center bg-[var(--bg-secondary)] text-[var(--text-muted)]">
                     <IconDevProfile size={size * 0.6} />

website-ts/src/components/Tabs.tsx

@@ -5,8 +5,8 @@ import { useState, ReactNode } from 'react'
 interface Tab {
   id: string
   label: ReactNode
-  content: ReactNode
-  description?: string  // Optional description for the tab
+  content: ReactNode | (() => ReactNode)
+  description?: string
 }
 
 interface TabsProps {
@@ -17,7 +17,8 @@ interface TabsProps {
 export default function Tabs({ tabs, defaultTab }: TabsProps) {
   const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)
   const activeTabData = tabs.find(t => t.id === activeTab)
-  const activeContent = activeTabData?.content
+  const rawContent = activeTabData?.content
+  const activeContent = typeof rawContent === 'function' ? rawContent() : rawContent
   const activeDescription = activeTabData?.description
 
   return (

website-ts/src/components/tabs/FantasyHome.tsx

@@ -1,31 +1,16 @@
 'use client'
 
-import { useMemo, useState, useEffect } from 'react'
+import { useMemo } from 'react'
 import Metric from '@/components/Metric'
 import Divider from '@/components/Divider'
 import InfoBox from '@/components/InfoBox'
-import { PlayerData } from '@/types'
+import { PlayerData, DraftPick } from '@/types'
+import { useMockDraft } from '@/hooks/useMockDraft'
 
 interface FantasyHomeProps {
   data: PlayerData[]
 }
 
-interface DraftPick {
-  pick: number
-  round: number
-  team: string
-  player_name: string
-  position: string
-  college: string
-  height: string
-  weight: number
-  stats: Record<string, number>
-}
-
-interface MockDraftData {
-  picks: DraftPick[]
-}
-
 // Team name mappings
 const TEAM_NAMES: Record<string, string> = {
   'LV': 'Las Vegas Raiders',
@@ -90,23 +75,7 @@ const TOP_PROSPECT_BLURBS: Record<string, { description: string; highlights: str
 const FEATURED_PROSPECT_PICKS = [1, 8, 4, 16, 21] // Mendoza, Love, Tate, Lemon, Simpson
 
 export default function FantasyHome({ data }: FantasyHomeProps) {
-  const [mockDraft, setMockDraft] = useState<MockDraftData | null>(null)
-
-  // Load mock draft data
-  useEffect(() => {
-    const loadMockDraft = async () => {
-      try {
-        const response = await fetch('/json_data/mock_draft.json')
-        if (response.ok) {
-          const data = await response.json()
-          setMockDraft(data)
-        }
-      } catch (error) {
-        console.error('Error loading mock draft:', error)
-      }
-    }
-    loadMockDraft()
-  }, [])
+  const mockDraft = useMockDraft()
 
   // Find the latest year
   const latestYear = useMemo(() => {

website-ts/src/components/tabs/FantasyRadar.tsx

@@ -9,6 +9,7 @@ import { IconStar, IconWarning, IconTrendUp, IconFire, IconCrystalBall } from '@
 import { PlayerData, BoomBustStats } from '@/types'
 import { calculateBoomBust } from '@/utils/calculations'
 import { getAvailableSeasons } from '@/utils/dataLoader'
+import { getPositionBadgeClass } from '@/utils/teamColors'
 
 interface FantasyRadarProps {
   data: PlayerData[]
@@ -295,17 +296,6 @@ export default function FantasyRadar({ data }: FantasyRadarProps) {
     },
   ]
 
-  const getPositionBadgeClass = (position: string) => {
-    const p = (position ?? '').trim().toUpperCase()
-    switch (p) {
-      case 'QB': return 'bg-red-500/20 text-red-400'
-      case 'RB': return 'bg-green-500/20 text-green-400'
-      case 'WR': return 'bg-blue-500/20 text-blue-400'
-      case 'TE': return 'bg-orange-500/20 text-orange-400'
-      default: return 'bg-gray-500/20 text-gray-400'
-    }
-  }
-
   if (filteredData.length === 0) {
     return (
       <div>