Add loading skeleton

package.json

@@ -33,6 +33,7 @@
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "autoprefixer": "^10.4.13",
     "cloc": "^2.11.0",
     "debug": "^4.3.4",
     "eslint": "^8.30.0",

src/components/Card.module.css

@@ -5,7 +5,6 @@
   padding: var(--space-4);
   border-radius: var(--space-4);
   background-color: var(--color-bg-1);
-  border: 1px solid gray;
   min-width: 20rem;
   box-shadow: var(--shadow-1);
 

src/components/Spinner.module.css

@@ -0,0 +1,30 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  --_track-width: var(--track-width, calc(0.125 * 1em));
+  width: 1em;
+  height: 1em;
+  mask-image: radial-gradient(
+      /* 1px for anti-aliasing */
+      transparent calc(1em * 0.5 - var(--_track-width) - 1px),
+      white calc(1em * 0.5 - var(--_track-width)),
+      white calc(1em * 0.5 - 2px),
+      transparent calc(1em * 0.5 - 1px));
+
+  &::after {
+    content: "";
+    display: block;
+    background: conic-gradient(transparent, currentColor);
+    animation: rotate 2s infinite linear;
+    width: 100%;
+    height: 100%;
+  }
+}

src/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import ui from './Spinner.module.css'
+
+export function Spinner() {
+  return <div class={ui.spinner}></div>
+}

src/routes/space/[id].module.css

@@ -11,6 +11,7 @@
   display: flex;
   flex-direction: column;
   padding: var(--space-4);
+  gap: var(--space-3);
   overflow: hidden;
 }
 
@@ -67,7 +68,7 @@
 .network-controls {
   grid-area: network;
   display: flex;
-  gap: var(--space-2);
+  gap: var(--space-3);
   align-items: center;
   justify-self: flex-end
 }
@@ -80,6 +81,7 @@
   align-items: flex-end;
 
   & button {
+    background-color: white;
     border-radius: 100vmax;
   }
 }
@@ -112,6 +114,14 @@
   }
 }
 
+.spinner {
+  display: grid;
+  place-content: center;
+  height: 100%;
+  font-size: 3rem;
+  color: #0004;
+}
+
 @media (max-width: 900px) {
   .space-name {
     text-align: start;

src/routes/space/[id].tsx

@@ -2,6 +2,7 @@ import { A } from '@solidjs/router'
 import { CardComponent, CreateCard, MyCardComponent } from '~/components/Card'
 import { For, Show, Suspense, createResource, createSignal } from 'solid-js'
 import { SpaceContext, useSpace } from '~/components/SpaceContext'
+import { Spinner } from '~/components/Spinner'
 import { UserIDContext, useUserID } from '~/components/UserIDContext'
 import { autofocus } from '~/utils/autofocus'
 import { createSyncedStore, createUndoRedo } from '~/utils/createSyncedStore'
@@ -126,6 +127,20 @@ function NetworkControls(props: { online: boolean, setOnline: (value: boolean) =
   )
 }
 
+function SpaceSkeleton() {
+  return (
+    <div class={ui.layout}>
+      <section class={ui.myCardsContainer}>
+      </section>
+      <div class={ui.main}>
+        <div class={ui.spinner}>
+          <Spinner />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function SpaceComponent() {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (isServer) {
@@ -150,7 +165,7 @@ export default function SpaceComponent() {
     )
   )
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={SpaceSkeleton}>
       <Show when={userID() && spaceStore()}>
         <UserIDContext.Provider value={() => userID()!}>
           <SpaceContext.Provider value={spaceStore()!}>

vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
 import basicSsl from '@vitejs/plugin-basic-ssl'
 import devtools from 'solid-devtools/vite'
 import postcssNetsing from 'postcss-nesting'
@@ -19,7 +20,7 @@ export default defineConfig({
       localsConvention: 'camelCaseOnly',
     },
     postcss: {
-      plugins: [postcssNetsing],
+      plugins: [postcssNetsing, autoprefixer],
     },
   },
   server: {