gnezim
dc030aceea
Phase 4B: MapCanvas.tsx is the sole Leaflet consumer in the codebase. Renders markers (blue/orange), polylines (solid/dashed) with great-circle arcs, popups and tooltips. Accepts all data as props (stateless). ClientOnly.tsx provides SSR safety by deferring render until mount.
30 lines
759 B
TypeScript
30 lines
759 B
TypeScript
/**
|
|
* SSR-safe wrapper that renders children only on the client.
|
|
*
|
|
* Returns `null` during SSR. After hydration, renders children.
|
|
* Used to wrap components that depend on browser APIs (e.g. Leaflet).
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { useState, useEffect, type ReactNode } from "react";
|
|
|
|
export interface ClientOnlyProps {
|
|
children: ReactNode;
|
|
fallback?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Renders children only after component has mounted in the browser.
|
|
* Returns `fallback` (default: null) during SSR and initial render.
|
|
*/
|
|
export function ClientOnly({ children, fallback = null }: ClientOnlyProps): JSX.Element {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
return <>{mounted ? children : fallback}</>;
|
|
}
|