Add basic implementation for chat side panel components

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

@@ -1,26 +1,17 @@
 import styles from './loading.module.css';
 
+import { CircleNotch } from '@phosphor-icons/react';
+
 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>
     );
+}
 
+export function InlineLoading() {
     return (
-        <div className="h-[100vh] flex items-center justify-center">
-            <h2 className="text-4xl text-black animate-bounce">
-                Loading...
-            </h2>
-        </div>
+        <button>
+            <CircleNotch className='animate-spin h-5 w-5 mr-3' />
+        </button>
     )
 }