add loading screens instead of dropping the user into an app that's not ready to use

static/index.css

@@ -3,6 +3,8 @@
 :root {
     --color-text: #111;
     --color-error: #db344b;
+
+    --color-brand-blue: #40b1f4;
     
     --color-panel-border: rgba(0, 0, 0, 20%);
     --color-panel-background: #fff;
@@ -71,6 +73,14 @@ main {
     height: 100%;
     position: relative;
 
+    &>.fullscreen {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
     &>rkgk-canvas-renderer {
         width: 100%;
         height: 100%;
@@ -95,6 +105,14 @@ main {
         top: 0;
         margin: 16px;
     }
+
+    &>#js-loading {
+        background-color: var(--color-panel-background);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 /* Buttons */
@@ -133,14 +151,33 @@ dialog::backdrop {
 
 /* Throbbers */
 
+@keyframes rkgk-throbber-loading {
+    0% {
+        clip-path: inset(0% 100% 0% 0%);
+        animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
+    }
+
+    50% {
+        clip-path: inset(0% 0% 0% 0%);
+        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
+    }
+
+    100% {
+        clip-path: inset(0% 0% 0% 100%);
+    }
+}
+
 rkgk-throbber {
     display: inline;
 
     &.loading {
-        &::before {
-            /* This could use an entertaining animation. */
-            content: "Please wait...";
-        }
+        display: block;
+        width: 16px;
+        height: 16px;
+        background-color: var(--color-brand-blue);
+        animation: infinite alternate rkgk-throbber-loading;
+        /* I wonder how many people will get _that_ reference. */
+        animation-duration: calc(60s / 141.98);
     }
 
     &.error {
@@ -254,3 +291,17 @@ rkgk-welcome {
         }
     }
 }
+
+/* Connection status dialogs */
+
+rkgk-connection-status {
+    &>dialog[name='logging-in-dialog'][open] {
+        border: none;
+        outline: none;
+        background: none;
+
+        display: flex;
+        gap: 8px;
+        align-items: center;
+    }
+}