-
- ),
- ssr: false // Since this only shows during racing, no need for SSR
-});
+const LeaderboardPanel = dynamic(
+ () =>
+ import("@/components/LeaderboardPanel").then((mod) => ({
+ default: mod.LeaderboardPanel,
+ })),
+ {
+ loading: () => (
+
+
+
+
+
+ ),
+ ssr: false, // Since this only shows during racing, no need for SSR
+ }
+);
export default function Home() {
const { status } = useChainRaceContext();
// Create a stabilized status to prevent flickering
const [stableStatus, setStableStatus] = useState(status);
-
+
useEffect(() => {
- const isRacingOrFinished = (s: ChainRaceStatus) => s === "racing" || s === "finished";
- const isInitialState = (s: ChainRaceStatus) => s === "idle" || s === "funding" || s === "ready";
-
+ const isRacingOrFinished = (s: ChainRaceStatus) =>
+ s === "racing" || s === "finished";
+ const isInitialState = (s: ChainRaceStatus) =>
+ s === "idle" || s === "funding" || s === "ready";
+
// For transitions to racing or finished, update immediately
if (isRacingOrFinished(status)) {
setStableStatus(status);
- }
+ }
// For transitions from racing/finished to other states, add a delay
else if (isRacingOrFinished(stableStatus) && !isRacingOrFinished(status)) {
// Only allow transition away from racing/finished if it's a deliberate action (like reset)
@@ -47,59 +55,86 @@ export default function Home() {
}
// Otherwise ignore the status change - keep showing race UI
// This prevents balance checks from affecting the UI
- }
+ }
// For initial states (idle, funding, ready)
else if (isInitialState(status)) {
setStableStatus(status);
}
}, [status, stableStatus]);
-
+
return (
-
+
-
- {/* Chain Derby Visualization (shown when racing or finished) */}
- {(stableStatus === "racing" || stableStatus === "finished") && (
-
- )}
-
-