From 318f9469a0805c200c55ce4024a95fd7b8dbe6a2 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 20 Oct 2025 14:18:23 -0500 Subject: [PATCH] feat(hero): persist random subtitle per-session MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Store the randomly selected subtitle index in sessionStorage so it remains consistent throughout the user's session. This eliminates subtitle flashing on page reloads and provides a more stable UX. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/contexts/HomeHeroContext.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/apps/web/src/contexts/HomeHeroContext.tsx b/apps/web/src/contexts/HomeHeroContext.tsx index 2a80ee56..615c8b19 100644 --- a/apps/web/src/contexts/HomeHeroContext.tsx +++ b/apps/web/src/contexts/HomeHeroContext.tsx @@ -3,7 +3,7 @@ import type React from 'react' import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react' import type { Subtitle } from '../data/abaciOneSubtitles' -import { getRandomSubtitle, subtitles } from '../data/abaciOneSubtitles' +import { subtitles } from '../data/abaciOneSubtitles' interface HomeHeroContextValue { subtitle: Subtitle @@ -22,9 +22,24 @@ export function HomeHeroProvider({ children }: { children: React.ReactNode }) { // Use first subtitle for SSR, then select random one on client mount const [subtitle, setSubtitle] = useState(subtitles[0]) - // Select random subtitle only on client side to avoid SSR mismatch + // Select random subtitle only on client side, persist per-session useEffect(() => { - setSubtitle(getRandomSubtitle()) + // Check if we have a stored subtitle index for this session + const storedIndex = sessionStorage.getItem('heroSubtitleIndex') + + if (storedIndex !== null) { + // Use the stored subtitle index + const index = parseInt(storedIndex, 10) + if (!Number.isNaN(index) && index >= 0 && index < subtitles.length) { + setSubtitle(subtitles[index]) + return + } + } + + // Generate a new random index and store it + const randomIndex = Math.floor(Math.random() * subtitles.length) + sessionStorage.setItem('heroSubtitleIndex', randomIndex.toString()) + setSubtitle(subtitles[randomIndex]) }, []) // Shared abacus value - always start at 0 for SSR/hydration consistency