Improve the logged out share experience

src/interface/web/app/components/loading/loading.module.css

@@ -1,24 +0,0 @@
-/* HTML: <div class="loader"></div> */
-.loader {
-    --c: conic-gradient(from -90deg, hsla(var(--secondary)) 90deg, #0000 0);
-    background: var(--c), var(--c);
-    background-size: 40% 40%;
-    animation: l19 1s infinite alternate;
-}
-
-@keyframes l19 {
-
-    0%,
-    10% {
-        background-position: 0 0, 0 calc(100%/3)
-    }
-
-    50% {
-        background-position: 0 0, calc(100%/3) calc(100%/3)
-    }
-
-    90%,
-    100% {
-        background-position: 0 0, calc(100%/3) 0
-    }
-}

src/interface/web/app/components/loading/loading.tsx

@@ -1,10 +1,11 @@
-import styles from './loading.module.css';
-
 import { CircleNotch } from '@phosphor-icons/react';
 
 export default function Loading() {
     return (
-        <div className={`${styles.loader} h-[100vh] flex items-center justify-center`}></div>
+        // NOTE: We can display usage tips here for casual learning moments.
+        <div className={`bg-background opacity-50 flex items-center justify-center h-screen`}>
+            <div>Loading <span><CircleNotch className={`inline animate-spin h-5 w-5`} /></span></div>
+        </div>
     );
 }