Checkpoint: Updated sidebar panel with new components

- Add non-functional UI elements for chat, references, feedback buttons, rename/share session, mic, attachment, websocket connection

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

@@ -0,0 +1,24 @@
+/* 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

@@ -0,0 +1,26 @@
+import styles from './loading.module.css';
+
+export default function Loading() {
+    // return (
+    //     <div className={`${styles.loading} h-[100vh] flex items-center justify-center`}>
+    //         <button type="button" className="bg-indigo-500" disabled>
+    //         Loading...
+    //         <span className="relative flex h-3 w-3">
+    //         <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+    //         <span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
+    //     </span>
+    //     </button>
+    //     </div>
+    // )
+    return (
+        <div className={`${styles.loader} h-[100vh] flex items-center justify-center`}></div>
+    );
+
+    return (
+        <div className="h-[100vh] flex items-center justify-center">
+            <h2 className="text-4xl text-black animate-bounce">
+                Loading...
+            </h2>
+        </div>
+    )
+}