wehub-resource-sync
30 lines
976 B
TypeScript
30 lines
976 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useTheme } from './ThemeContext';
|
|
import { BootSplash } from './BootSplash';
|
|
|
|
const FADE_DURATION_MS = 200;
|
|
|
|
/**
|
|
* Gates the app's first render until async boot signals are ready (currently
|
|
* just ThemeService.init). Renders BootSplash on top, fades it out on ready,
|
|
* and unmounts after the fade. Children mount the moment ready flips so the
|
|
* cross-fade reveals real UI underneath rather than hard-popping.
|
|
*/
|
|
export const BootGate: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { ready } = useTheme();
|
|
const [splashMounted, setSplashMounted] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!ready) return;
|
|
const id = window.setTimeout(() => setSplashMounted(false), FADE_DURATION_MS + 50);
|
|
return () => window.clearTimeout(id);
|
|
}, [ready]);
|
|
|
|
return (
|
|
<>
|
|
{ready ? children : null}
|
|
{splashMounted ? <BootSplash fadingOut={ready} /> : null}
|
|
</>
|
|
);
|
|
};
|