From f8d821fca7630cbdfd48c0361cc7c6b3c95f8cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Curley?= <ciaran.curley.11.11@gmail.com>
Date: Wed, 26 Aug 2026 23:00:24 +0100
Subject: [PATCH] update enviroment

---
 src/routes/_experiment.index.tsx | 48 +++-----------------------------
 src/styles.css                   | 19 +++++++++++++
 2 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/src/routes/_experiment.index.tsx b/src/routes/_experiment.index.tsx
index b2cb737..858c0c1 100644
--- a/src/routes/_experiment.index.tsx
+++ b/src/routes/_experiment.index.tsx
@@ -1,54 +1,14 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
-import { useNavigationLocked } from '../components/NavigationLock'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_experiment/')({
   component: ExperimentIndexRoute,
 })
 
 function ExperimentIndexRoute() {
-  const navigationLocked = useNavigationLocked()
-
   return (
-    <section className="start-card">
-      <p className="eyebrow">Start here</p>
-      <h2>Choose a loading strategy.</h2>
-      <p>
-        Watch this panel when you open either route. It will first show the pending component, then
-        replace it with the fetched Pokémon data.
-      </p>
-
-      <div
-        className="experiment-grid"
-        aria-label="Choose an experiment"
-        aria-busy={navigationLocked}
-      >
-        <Link to="/await" preload={false} className="experiment-link" disabled={navigationLocked}>
-          <span className="experiment-number">01</span>
-          <span className="experiment-copy">
-            <strong>Await the loader</strong>
-            <span>Wait one second before revealing pending UI.</span>
-          </span>
-          <span className="experiment-arrow" aria-hidden="true">
-            →
-          </span>
-        </Link>
-
-        <Link
-          to="/suspense"
-          preload={false}
-          className="experiment-link"
-          disabled={navigationLocked}
-        >
-          <span className="experiment-number">02</span>
-          <span className="experiment-copy">
-            <strong>Use Suspense</strong>
-            <span>Reveal pending UI as soon as the route renders.</span>
-          </span>
-          <span className="experiment-arrow" aria-hidden="true">
-            →
-          </span>
-        </Link>
-      </div>
+    <section className="experiment-placeholder">
+      <p className="eyebrow">Experiment output</p>
+      <p>Choose an experiment to begin.</p>
     </section>
   )
 }
diff --git a/src/styles.css b/src/styles.css
index 4522e72..28237a5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -287,6 +287,25 @@ nav a[data-status='active'] {
   width: 100%;
 }
 
+.experiment-placeholder {
+  display: grid;
+  min-height: inherit;
+  padding: 36px;
+  border: 1px dashed #bfd0c2;
+  border-radius: 22px;
+  color: #64756e;
+  place-content: center;
+  text-align: center;
+}
+
+.experiment-placeholder p {
+  margin: 0;
+}
+
+.experiment-placeholder .eyebrow {
+  margin-bottom: 8px;
+}
+
 .start-card {
   padding: clamp(32px, 6vw, 58px);
   border: 1px solid #c7d7c8;
-- 
knotmirror 0.0.1