Auto-Refresh Market Research on Login

Purpose

Automatically refreshes stale market research data when a user logs in, with an engaging 3D animated progress overlay to keep users informed while data is being updated.

Behavior

Trigger

• Fires once per browser session after successful login
• Uses sessionStorage.setItem('research_refresh_done', Date.now().toString()) to prevent re-triggering on navigation
• Clears on browser tab close (session storage behavior)

Age-Gating

• Before refreshing, checks each property's research data age via GET /api/market-research/:type/:entityId
• Only regenerates research older than 7 days (RESEARCH_MAX_AGE_DAYS = 7)
• Properties with fresh research are skipped, saving API calls and time

Refresh Flow

1. User logs in → App.tsx detects authenticated state + no session flag
2. ResearchRefreshOverlay mounts and fetches property list
3. For each property, checks research freshness
4. Stale properties trigger POST /api/market-research/property/:id/generate
5. Progress overlay shows current property name and completion percentage
6. On completion, overlay fades out and session flag is set

3D Animated Overlay

Component

client/src/components/ResearchRefreshOverlay.tsx

Technology

• Three.js via @react-three/fiber (React renderer)
• @react-three/drei (helpers: Float, MeshDistortMaterial)
• framer-motion (fade-in/fade-out transitions)

Visual Elements

Performance

• Uses <Canvas> with dpr={[1, 1.5]} for performance on lower-end devices
• Post-processing effects (bloom) disabled by default for stability
• Scene elements use useFrame for smooth 60fps animation

Integration in App.tsx

tsx
1import { ResearchRefreshOverlay } from "@/components/ResearchRefreshOverlay";
2
3function App() {
4  const { isAuthenticated } = useAuth();
5  const [showRefresh, setShowRefresh] = useState(false);
6
7  useEffect(() => {
8    if (isAuthenticated && !sessionStorage.getItem('research_refresh_done')) {
9      setShowRefresh(true);
10    }
11  }, [isAuthenticated]);
12
13  const handleResearchComplete = useCallback(() => {
14    sessionStorage.setItem('research_refresh_done', Date.now().toString());
15    setShowRefresh(false);
16  }, []);
17
18  return (
19    <>
20      <Router>...</Router>
21      {showRefresh && <ResearchRefreshOverlay onComplete={handleResearchComplete} />}
22    </>
23  );
24}

Dependencies

• three — Core 3D engine
• @react-three/fiber — React renderer for Three.js
• @react-three/drei — Helper components (Float, MeshDistortMaterial)
• framer-motion — Animation library for overlay transitions
• @react-three/postprocessing — Optional bloom/glow effects

API Endpoints Used