feat: app loading screen

* fix tutorial

web/public/loading.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+	<g fill="none" fill-rule="evenodd">
+		<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+		<path fill="currentColor" d="M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15M1.5 12C1.5 6.201 6.201 1.5 12 1.5S22.5 6.201 22.5 12S17.799 22.5 12 22.5S1.5 17.799 1.5 12" opacity="0.1" />
+		<path fill="currentColor" d="M12 4.5a7.46 7.46 0 0 0-5.187 2.083a1.5 1.5 0 0 1-2.075-2.166A10.46 10.46 0 0 1 12 1.5a1.5 1.5 0 0 1 0 3" />
+	</g>
+</svg>

web/src/App.tsx

···
 import { Route, Router } from "@solidjs/router";
 import type { Component, ParentComponent } from "solid-js";
 import { createEffect, createSignal, onMount, Show } from "solid-js";
+import { Motion, Presence } from "solid-motionone";
+
+const LoadingScreen: Component = () => (
+  <Motion.div
+    exit={{ opacity: 0 }}
+    transition={{ duration: 0.5 }}
+    class="fixed inset-0 bg-[#161616] flex items-center justify-center z-50">
+    <div class="text-[#0F62FE] animate-spin text-4xl w-12 h-12">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+        <g fill="none" fill-rule="evenodd">
+          <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+          <path
+            fill="currentColor"
+            d="M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15M1.5 12C1.5 6.201 6.201 1.5 12 1.5S22.5 6.201 22.5 12S17.799 22.5 12 22.5S1.5 17.799 1.5 12"
+            opacity="0.1" />
+          <path
+            fill="currentColor"
+            d="M12 4.5a7.46 7.46 0 0 0-5.187 2.083a1.5 1.5 0 0 1-2.075-2.166A10.46 10.46 0 0 1 12 1.5a1.5 1.5 0 0 1 0 3" />
+        </g>
+      </svg>
+    </div>
+  </Motion.div>
+);
 
 const ProtectedLayout: ParentComponent = (props) => {
   const [showOnboarding, setShowOnboarding] = createSignal(false);
···
   };
 
   return (
-    <Show when={authStore.isAuthenticated()} fallback={<Landing />}>
-      <AppLayout>{props.children}</AppLayout>
-      <OnboardingDialog open={showOnboarding()} onComplete={handleOnboardingComplete} />
-    </Show>
+    <Presence>
+      <Show when={authStore.loading()}>
+        <LoadingScreen />
+      </Show>
+      <Show when={!authStore.loading()}>
+        <Show when={authStore.isAuthenticated()} fallback={<Landing />}>
+          <AppLayout>{props.children}</AppLayout>
+          <OnboardingDialog open={showOnboarding()} onComplete={handleOnboardingComplete} />
+        </Show>
+      </Show>
+    </Presence>
   );
 };
 

web/src/components/TutorialOverlay.tsx

···
   });
 
   createEffect(() => {
-    if (!tutorial.active()) return;
-    const element = currentTarget();
-    if (element && typeof element.scrollIntoView === "function") {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (tutorial.active()) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
+    onCleanup(() => {
+      document.body.style.overflow = "";
+    });
   });
 
   return (
···
                     "box-shadow": "0 0 0 4px rgba(15, 98, 254, 0.3)",
                   }} />
 
-                <Motion.div
-                  initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.2 }}
+                <div
                   class="absolute w-80 bg-[#262626] border border-[#393939] rounded-lg shadow-xl p-4 pointer-events-auto"
                   style={{
                     top: `${getTooltipPosition(pos(), tutorial.currentStep()!.placement).top}px`,
···
                     </Index>
                   </div>
                   <p class="text-xs text-[#525252] text-center mt-3">Use ← → arrow keys or Esc to skip</p>
-                </Motion.div>
+                </div>
               </>
             )}
           </Show>

web/src/lib/store.ts

···
       ? { did: localStorage.getItem("did")!, handle: localStorage.getItem("handle") || "" }
       : null,
   );
-  const [accessJwt, setAccessJwt] = createSignal<string | null>(localStorage.getItem("accessJwt"));
-  const [_refreshJwt, setRefreshJwt] = createSignal<string | null>(localStorage.getItem("refreshJwt"));
+  const [accessJwt, setAccessJwt] = createSignal(localStorage.getItem("accessJwt"));
+  const [_, setRefreshJwt] = createSignal(localStorage.getItem("refreshJwt"));
 
   const login = (data: { accessJwt: string; refreshJwt: string; did: string; handle: string }) => {
     setAccessJwt(data.accessJwt);
···
     localStorage.clear();
   };
 
-  return { user, accessJwt, isAuthenticated: () => !!accessJwt(), login, logout };
+  const [loading, setLoading] = createSignal(true);
+
+  const init = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    setLoading(false);
+  };
+
+  init();
+
+  return { user, accessJwt, isAuthenticated: () => !!accessJwt(), login, logout, loading };
 }
 
 export const authStore = createRoot(createAuthStore);