Lazy-loads world-atlas (~55kb) — пока геометрия не доехала, видны
+ * только sphere + graticule + orbital arcs (still looks like a loader).
*
- * Использование:
+ *
Использование:
* // 64px default
* // larger
- * // tint
- *
- * Performance: всё в SVG + CSS animations (transform / opacity) — paint-only,
- * без JS frame loop. Безопасно держать одновременно на странице.
+ * // tint via currentColor
*/
export type GlobeLoaderProps = {
/** Pixel size of the spinner square (default 64). */
size?: number
- /** Optional label rendered below (text-body, мute). */
+ /** Optional label rendered below. */
label?: React.ReactNode
- /** Extra wrapper class — обычно text-ink/text-mute для tint. */
+ /** Extra wrapper class. */
className?: string
}
+// Cache загруженной land geometry между mount'ами loader'а (типично загрузка
+// списка → переход в editor → ещё loader). Без cache каждый GlobeLoader
+// триггерил бы import заново — Vite кеширует chunk, но parse cost есть.
+let LAND_CACHE: Feature | null = null
+let LAND_PROMISE: Promise> | null = null
+
+async function loadLand(): Promise> {
+ if (LAND_CACHE) return LAND_CACHE
+ if (LAND_PROMISE) return LAND_PROMISE
+ LAND_PROMISE = (async () => {
+ const [{ feature }, world] = await Promise.all([
+ import('topojson-client'),
+ import('world-atlas/land-110m.json'),
+ ])
+ const data = (world as { default: unknown }).default ?? world
+ // topojson-client expects Topology с objects.land mesh.
+ const f = feature(
+ data as Parameters[0],
+ (data as { objects: { land: Parameters[1] } }).objects.land,
+ ) as Feature | FeatureCollection
+ const result = 'features' in f ? (f.features[0] as Feature) : f
+ LAND_CACHE = result
+ return result
+ })()
+ return LAND_PROMISE
+}
+
export function GlobeLoader({ size = 64, label, className }: GlobeLoaderProps) {
- // ID gradient unique per instance чтобы несколько loader'ов не конфликтовали
- // через shared . React 19 useId — SSR-safe + stable.
const id = useReactId().replace(/:/g, '')
const tailA = `globe-tail-a-${id}`
const tailB = `globe-tail-b-${id}`
+ const sphereRef = useRef(null)
+ const gratRef = useRef(null)
+ const landRef = useRef(null)
+ const [landReady, setLandReady] = useState(false)
+
+ useEffect(() => {
+ // Setup projection: orthographic, R=70 (как в прототипе), tilt -15° (легкий
+ // northern lean). viewBox 200x200 — fixed; scale projection относительно него.
+ const projection = geoOrthographic()
+ .scale(70)
+ .translate([100, 100])
+ .clipAngle(90)
+ .rotate([0, -15, 0])
+
+ const path = geoPath(projection)
+ const graticule = geoGraticule10()
+
+ // Initial render (без land — оно lazy).
+ if (sphereRef.current) sphereRef.current.setAttribute('d', path({ type: 'Sphere' }) ?? '')
+ if (gratRef.current) gratRef.current.setAttribute('d', path(graticule) ?? '')
+
+ let landFeature: Feature | null = LAND_CACHE
+ let cancelled = false
+ if (!landFeature) {
+ void loadLand().then((f) => {
+ if (cancelled) return
+ landFeature = f
+ if (landRef.current) landRef.current.setAttribute('d', path(f) ?? '')
+ setLandReady(true)
+ })
+ } else {
+ if (landRef.current) landRef.current.setAttribute('d', path(landFeature) ?? '')
+ setLandReady(true)
+ }
+
+ // Animate rotation — 8s per revolution per prototype.
+ const start = performance.now()
+ const period = 8000
+ let raf = 0
+
+ const frame = (now: number) => {
+ if (cancelled) return
+ const t = ((now - start) % period) / period
+ const lambda = t * 360
+ projection.rotate([lambda, -15, 0])
+ if (gratRef.current) gratRef.current.setAttribute('d', path(graticule) ?? '')
+ if (landFeature && landRef.current) {
+ landRef.current.setAttribute('d', path(landFeature) ?? '')
+ }
+ raf = requestAnimationFrame(frame)
+ }
+ raf = requestAnimationFrame(frame)
+
+ return () => {
+ cancelled = true
+ cancelAnimationFrame(raf)
+ }
+ }, [])
+
return (
-
+
+ {/* Outer overlay svg: whirl arcs + pulse ring (CSS-animated). */}
- {/* Sphere + graticule. Без d3 — фиксированные meridians/parallels.
- * Meridians = vertical ellipses with varying rx (orthographic-like
- * projection приближение). Parallels = horizontal lines (clipped
- * sphere implicit через circle clip). */}
-
-
- {/* meridians at different rx values — looks like rotating projection */}
-
-
-
-
-
- {/* parallels — horizontal lines clipped within the sphere */}
-
-
-
-
-
-
-
+ {/* Globe svg: real orthographic projection с rotating land. */}
+