feat: chat panel UE done

app/components/Loading/index.module.scss

@@ -1,8 +0,0 @@
-.loading-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  }

app/components/Loading/index.tsx

@@ -1,12 +1,33 @@
+import useMobileScreen from "@/app/hooks/useMobileScreen";
 import BotIcon from "@/app/icons/bot.svg";
 import LoadingIcon from "@/app/icons/three-dots.svg";
 
-import styles from "./index.module.scss";
+import { getCSSVar } from "@/app/utils";
+
+export default function Loading({
+  noLogo,
+  useSkeleton = true,
+}: {
+  noLogo?: boolean;
+  useSkeleton?: boolean;
+}) {
+  let theme;
+  if (typeof window !== "undefined") {
+    theme = getCSSVar("--chat-panel-bg");
+  }
+
+  const isMobileScreen = useMobileScreen();
 
-export default function Loading(props: { noLogo?: boolean }) {
   return (
-    <div className={styles["loading-content"] + " no-dark"}>
-      {!props.noLogo && <BotIcon />}
+    <div
+      className={`flex flex-col justify-center items-center w-[100%] ${
+        isMobileScreen
+          ? "h-[100%]"
+          : `my-2.5 ml-1 mr-2.5 rounded-md h-[calc(100%-1.25rem)]`
+      }`}
+      style={{ background: useSkeleton ? theme : "" }}
+    >
+      {!noLogo && <BotIcon />}
       <LoadingIcon />
     </div>
   );