fix how it work loading screen

src/modules/how-it-works-3d/hooks/useDeviceTier.js

@@ -0,0 +1,38 @@
+/**
+ * useDeviceTier — lightweight client-side device capability detection.
+ *
+ * Returns 'desktop' | 'tablet' | 'mobile' based on viewport width,
+ * touch capability, and hardware concurrency. The result is computed
+ * once on mount and never changes (no resize listener — the 3D scene
+ * should not swap LOD tiers mid-session).
+ *
+ * Also exports a plain `getDeviceTier()` function for non-React contexts.
+ */
+import { useMemo } from 'react'
+
+/** Compute device tier from current browser globals. */
+export function getDeviceTier() {
+  if (typeof window === 'undefined') return 'desktop'
+
+  const w = window.innerWidth
+  const hasTouch = navigator.maxTouchPoints > 0
+  const cores = navigator.hardwareConcurrency || 4
+
+  // Mobile: narrow viewport OR low-core touch device
+  if (w <= 600 || (hasTouch && w <= 768)) return 'mobile'
+
+  // Tablet: mid-width touch device (iPad, Android tablet, etc.)
+  if (w <= 1024 && hasTouch) return 'tablet'
+
+  // Low-powered desktops with ≤ 2 cores get tablet-tier rendering
+  if (cores <= 2) return 'tablet'
+
+  return 'desktop'
+}
+
+/** React hook — memoized once per component lifetime. */
+export function useDeviceTier() {
+  return useMemo(() => getDeviceTier(), [])
+}
+
+export default useDeviceTier