slight improvement on landing UX

src/features/file/index.tsx

@@ -28,6 +28,7 @@ interface InternalFilesContextType {
 interface FilesContextType {
     readonly files: Accessor<FileEntity[]>,
     readonly root: Accessor<FileSystemDirectoryHandle | undefined>,
+    readonly loading: Accessor<boolean>,
 
     open(directory: FileSystemDirectoryHandle): void;
     get(key: string): Accessor<FileSystemDirectoryHandle | undefined>
@@ -109,7 +110,7 @@ const serverContext = (): InternalFilesContextType => ({
 export const FilesProvider: ParentComponent = (props) => {
     const internal = isServer ? serverContext() : clientContext();
 
-    const [state, setState] = createStore<{ openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ openedFiles: [], root: undefined });
+    const [state, setState] = createStore<{ loading: boolean, openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ loading: true, openedFiles: [], root: undefined });
 
     internal.onChange(async () => {
         setState('openedFiles', await internal.entries());
@@ -117,19 +118,19 @@ export const FilesProvider: ParentComponent = (props) => {
 
     onMount(() => {
         (async () => {
-            const [root, files] = await Promise.all([
+            const [root, openedFiles] = await Promise.all([
                 internal.get(ROOT),
                 internal.entries(),
             ]);
 
-            setState('root', root);
-            setState('openedFiles', files);
+            setState(prev => ({ ...prev, loading: false, root, openedFiles }));
         })();
     });
 
     const context: FilesContextType = {
         files: createMemo(() => state.openedFiles),
         root: createMemo(() => state.root),
+        loading: createMemo(() => state.loading),
 
         async open(directory: FileSystemDirectoryHandle) {
             await internal.remove(...(await internal.keys()));

src/routes/(editor).tsx

@@ -68,7 +68,7 @@ export default function Editor(props: ParentProps) {
 
         <main class={css.layout} inert={commandPalette()?.open()}>
             <nav class={css.menu}>
-                <A class={css.logo} href="/">
+                <A class={css.logo} href="/welcome">
                     <picture>
                         <source srcset="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
                         <source srcset="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />

src/routes/(editor)/index.tsx

@@ -1,22 +1,23 @@
-import { A } from "@solidjs/router";
-import LandingImage from '../../assets/landing.svg'
-import css from "./index.module.css";
-
+import { useNavigate } from "@solidjs/router";
+import { createEffect } from "solid-js";
+import { useFiles } from "~/features/file";
 
 export default function Index() {
-  return (
-    <main class={css.main}>
-      <LandingImage />
+  const navigate = useNavigate();
+  const files = useFiles();
 
-      <h1>Hi, welcome!</h1>
-      <b>Lets get started</b>
+  createEffect(() => {
+    const loading = files.loading();
+    const root = files.root();
 
-      <ul>
-        <li><A href="/edit">Start editing</A></li>
-        {/* <li><A href="/experimental">Try new features</A></li> */}
-        <li><A href="/instructions">Read the instructions</A></li>
-        <li><A href="/about">About this app</A></li>
-      </ul>
-    </main>
-  );
+    if (loading) {
+      return;
+    }
+
+    navigate(root !== undefined ? '/edit' : '/welcome');
+  });
+
+  return <section style="display: grid; place-content: center;">
+    <span>Loading, one moment please</span>
+  </section>;
 }

src/routes/(editor)/welcome.tsx

@@ -0,0 +1,19 @@
+import { A } from "@solidjs/router";
+import LandingImage from '../../assets/landing.svg'
+import css from "./welcome.module.css";
+
+export default function Welcome() {
+    return <main class={css.main}>
+        <LandingImage />
+
+        <h1>Hi, welcome!</h1>
+        <b>Lets get started</b>
+
+        <ul>
+            <li><A href="/edit">Start editing</A></li>
+            {/* <li><A href="/experimental">Try new features</A></li> */}
+            <li><A href="/instructions">Read the instructions</A></li>
+            <li><A href="/about">About this app</A></li>
+        </ul>
+    </main>;
+}