Dev

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM
 
 WORKDIR /app
 

LogIQ/src/Components/PreviewGrid.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useMemo, useState } from "react";
+
+const FRAME_COUNT = 6;
+const FRAME_INTERVAL = 1200;
+
+function getStatusLabel(state) {
+  switch (state) {
+    case "loading":
+      return "Loading…";
+    case "ready":
+      return "Rendered";
+    case "error":
+      return "Blocked";
+    default:
+      return "Queued";
+  }
+}
+
+function PreviewFrame({ url, index, delayMs }) {
+  const [source, setSource] = useState("");
+  const [state, setState] = useState("queued");
+  const [startedAt, setStartedAt] = useState(null);
+  const [loadedAt, setLoadedAt] = useState(null);
+
+  useEffect(() => {
+    if (!url) {
+      setSource("");
+      setState("idle");
+      setStartedAt(null);
+      setLoadedAt(null);
+      return;
+    }
+
+    setState("queued");
+    const timer = setTimeout(() => {
+      setSource(url);
+      setStartedAt(performance.now());
+      setState("loading");
+    }, delayMs);
+
+    return () => {
+      clearTimeout(timer);
+      setSource("");
+      setState("queued");
+      setStartedAt(null);
+      setLoadedAt(null);
+    };
+  }, [url, delayMs]);
+
+  const handleLoad = () => {
+    setState("ready");
+    setLoadedAt(performance.now());
+  };
+
+  const handleError = () => {
+    setState("error");
+  };
+
+  const deltaMs =
+    startedAt && loadedAt ? Math.max(0, loadedAt - startedAt).toFixed(0) : null;
+
+  return (
+    <div className={`preview-frame ${state}`}>
+      {source ? (
+        <iframe
+          src={source}
+          title={`preview-${index}`}
+          onLoad={handleLoad}
+          onError={handleError}
+          sandbox="allow-same-origin allow-scripts allow-forms"
+          loading="lazy"
+          referrerPolicy="no-referrer"
+        />
+      ) : (
+        <div className="preview-placeholder">Awaiting snapshot…</div>
+      )}
+      <footer>
+        <div>
+          <span>Frame {index + 1}</span>
+          <small>{getStatusLabel(state)}</small>
+        </div>
+        <div className="latency-badge">
+          {deltaMs ? `${deltaMs} ms` : "—"}
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default function PreviewGrid({ url }) {
+  const frames = useMemo(
+    () => Array.from({ length: FRAME_COUNT }, (_, idx) => idx),
+    []
+  );
+
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <section className="preview-grid">
+      <header>
+        <div>
+          <p className="eyebrow">Live stability preview</p>
+          <h2>How does the page settle?</h2>
+        </div>
+        <p>
+          We reload the site multiple times in quick succession to surface
+          layout shifts, blocking assets, and other instability indicators.
+        </p>
+      </header>
+      <div className="preview-grid__frames">
+        {frames.map((idx) => (
+          <PreviewFrame
+            key={`${url}-${idx}`}
+            url={url}
+            index={idx}
+            delayMs={idx * FRAME_INTERVAL}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+

netlify.toml

@@ -0,0 +1,8 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "22"
+  NPM_FLAGS = "--legacy-peer-deps"
+

package.json

@@ -16,15 +16,15 @@
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-fetch-hook": "^1.9.5",
-    "react-icons": "^5.4.0",
-    "use-http": "^1.0.28"
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
     "vite": "^6.0.7"
-  },
-  "packageManager": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728"
+  }
 }