Refactor loading states to render empty divs for better UX consistency

- Replace "Loading..." text with empty divs in various components
- Simplify loading placeholders to improve visual stability during data fetches

packages/web/src/routes/archive.tsx

@@ -99,11 +99,6 @@ function ArchivePage() {
             </p>
           </div>
           <div className="flex flex-col items-end gap-2 text-sm text-white/60">
-            {loading && (
-              <span className="text-xs uppercase tracking-[0.3em] text-white/40">
-                Loading…
-              </span>
-            )}
             <button
               type="button"
               className="flex items-center gap-2 rounded-full bg-white/90 px-5 py-2 text-sm font-semibold uppercase tracking-[0.3em] text-slate-900 transition hover:bg-white disabled:cursor-not-allowed disabled:bg-white/40"

packages/web/src/routes/canvas.$canvasId.tsx

@@ -48,17 +48,7 @@ function CanvasDetailPage() {
   }, [canvasId])
 
   if (loading) {
-    return (
-      <div className="flex h-screen w-screen flex-col items-center justify-center gap-4 bg-[#03050a] text-white/70">
-        <p className="text-xs uppercase tracking-[0.4em]">Loading canvas…</p>
-        <Link
-          to="/canvas"
-          className="text-[11px] uppercase tracking-[0.3em] text-white/40 hover:text-white"
-        >
-          Back to projects
-        </Link>
-      </div>
-    )
+    return <div className="h-screen w-screen bg-[#03050a]" />
   }
 
   if (error || !snapshot) {

packages/web/src/routes/canvas.index.tsx

@@ -87,11 +87,6 @@ function CanvasProjectsPage() {
             </p>
           </div>
           <div className="flex flex-col items-end gap-2 text-sm text-white/60">
-            {loading ? (
-              <span className="text-xs uppercase tracking-[0.3em] text-white/40">
-                Loading…
-              </span>
-            ) : null}
             <button
               type="button"
               className="rounded-full bg-white/90 px-5 py-2 text-sm font-semibold uppercase tracking-[0.3em] text-slate-900 transition hover:bg-white disabled:cursor-not-allowed disabled:bg-white/40"

packages/web/src/routes/glide.tsx

@@ -86,11 +86,7 @@ function GlidePage() {
   }
 
   if (!me.$isLoaded || !root?.$isLoaded) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading Jazz...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   const canvasItems: GlideCanvasItem[] = canvasList?.$isLoaded ? [...canvasList] : []

packages/web/src/routes/index.tsx

@@ -95,11 +95,7 @@ function Dashboard() {
   }
 
   if (!me.$isLoaded || !root?.$isLoaded) {
-    return (
-      <div className="min-h-screen bg-black text-white grid place-items-center">
-        <p className="text-neutral-400">Loading...</p>
-      </div>
-    )
+    return <div className="min-h-screen bg-black" />
   }
 
   return (
@@ -290,11 +286,7 @@ function HomePage() {
   const { data: session, isPending } = authClient.useSession()
 
   if (isPending) {
-    return (
-      <div className="min-h-screen bg-black text-white grid place-items-center">
-        <p className="text-neutral-400">Loading...</p>
-      </div>
-    )
+    return <div className="min-h-screen bg-black" />
   }
 
   if (session?.user) {

packages/web/src/routes/sessions.tsx

@@ -57,11 +57,7 @@ function SessionsPage() {
   const [importJson, setImportJson] = useState("")
 
   if (authPending) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   if (!session?.user) {
@@ -83,11 +79,7 @@ function SessionsPage() {
   const root = me.$isLoaded ? me.root : null
 
   if (!me.$isLoaded || !root?.$isLoaded) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading Jazz...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   // Initialize browserSessions if not present

packages/web/src/routes/streams.tsx

@@ -153,11 +153,7 @@ function StreamsPage() {
   }
 
   if (!me.$isLoaded || !root?.$isLoaded) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading Jazz...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   const recordings: StreamRecording[] = recordingsList?.$isLoaded

packages/web/src/routes/urls.tsx

@@ -19,11 +19,7 @@ function UrlsPage() {
   const [isAdding, setIsAdding] = useState(false)
 
   if (authPending) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   if (!session?.user) {
@@ -46,11 +42,7 @@ function UrlsPage() {
   const urlList = root?.$isLoaded ? root.savedUrls : null
 
   if (!me.$isLoaded || !root?.$isLoaded) {
-    return (
-      <div className="min-h-screen text-white grid place-items-center">
-        <p className="text-slate-400">Loading Jazz...</p>
-      </div>
-    )
+    return <div className="min-h-screen" />
   }
 
   const savedUrls: SavedUrl[] = urlList?.$isLoaded ? [...urlList] : []