Smoother transition in settings

frontend/.eslintrc.cjs

@@ -18,6 +18,7 @@ module.exports = {
   },
   plugins: ['react', 'unused-imports'],
   rules: {
+    'react/prop-types': 'off',
     'unused-imports/no-unused-imports': 'error',
     'react/react-in-jsx-scope': 'off',
     'prettier/prettier': [

frontend/src/components/SkeletonLoader.tsx

@@ -1,8 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 interface SkeletonLoaderProps {
   count?: number;
-  component?: 'default' | 'analysis' | 'chatbot' | 'logs';
+  component?:
+    | 'default'
+    | 'analysis'
+    | 'logs'
+    | 'table'
+    | 'chatbot'
+    | 'dropdown';
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -32,107 +38,162 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     };
   }, [count]);
 
-  return (
-    <div className="flex flex-col space-y-4">
-      {component === 'default' ? (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} dark:bg-raisin-black rounded-3xl animate-pulse`}
-          >
-            <div className="space-y-4">
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
-              <div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
+  const renderTable = () => (
+    <>
+      {[...Array(4)].map((_, idx) => (
+        <tr key={idx} className="animate-pulse">
+          <td className="py-4 px-4 w-[45%]">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          </td>
+          <td className="py-4 px-4 w-[20%]">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          </td>
+          <td className="py-4 px-4 w-[25%]">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          </td>
+          <td className="py-4 px-4 w-[10%]">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          </td>
+        </tr>
+      ))}
+    </>
+  );
+
+  const renderChatbot = () => (
+    <>
+      {[...Array(4)].map((_, idx) => (
+        <tr key={idx} className="animate-pulse">
+          <td className="p-2">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mx-auto"></div>
+          </td>
+          <td className="p-2">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+          </td>
+          <td className="p-2">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+          </td>
+          <td className="p-2">
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-8 mx-auto"></div>
+          </td>
+        </tr>
+      ))}
+    </>
+  );
+
+  const renderDropdown = () => (
+    <div className="animate-pulse">
+      <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-24 mb-2"></div>
+      <div className="w-[360px] h-14 bg-gray-300 dark:bg-gray-600 rounded-3xl flex items-center justify-between px-4">
+        <div className="h-3 bg-gray-400 dark:bg-gray-700 rounded w-24"></div>
+        <div className="h-3 w-3 bg-gray-400 dark:bg-gray-700 rounded"></div>
+      </div>
+    </div>
+  );
+
+  const renderLogs = () => (
+    <div className="animate-pulse space-y-px">
+      {[...Array(8)].map((_, idx) => (
+        <div
+          key={idx}
+          className="flex items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
+        >
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+            <div className="flex flex-row items-center gap-2">
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-14 bg-opacity-80"></div>
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-40"></div>
             </div>
           </div>
-        ))
-      ) : component === 'analysis' ? (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
-          >
-            <div className="space-y-6">
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
-                <div className="grid grid-cols-6 gap-2 items-end">
-                  <div className="h-32 bg-gray-600 rounded"></div>
-                  <div className="h-24 bg-gray-600 rounded"></div>
-                  <div className="h-40 bg-gray-600 rounded"></div>
-                  <div className="h-28 bg-gray-600 rounded"></div>
-                  <div className="h-36 bg-gray-600 rounded"></div>
-                  <div className="h-20 bg-gray-600 rounded"></div>
-                </div>
-              </div>
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
-                <div className="h-32 bg-gray-600 rounded"></div>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="h-4 bg-gray-600 rounded w-full"></div>
-                <div className="h-4 bg-gray-600 rounded w-full"></div>
-              </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const renderDefault = () => (
+    <>
+      {[...Array(skeletonCount)].map((_, idx) => (
+        <div
+          key={idx}
+          className={`p-6 ${
+            skeletonCount === 1 ? 'w-full' : 'w-60'
+          } dark:bg-raisin-black rounded-3xl animate-pulse`}
+        >
+          <div className="space-y-4">
+            <div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-3/4"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-5/6"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/2"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-3/4"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
             </div>
-          </div>
-        ))
-      ) : component === 'chatbot' ? (
-        <div className="space-y-2 p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse">
-          <div className="grid grid-cols-4 gap-2 p-2">
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-          </div>
-          <div className="border-t border-gray-600 my-2"></div>
-
-          {[...Array(skeletonCount * 6)].map((_, idx) => (
-            <div key={idx} className="grid grid-cols-4 gap-2 p-2 space-x-2">
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
+            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
+            <div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-2/3"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/4"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
+            </div>
+            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
+            <div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-5/6"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/3"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-2/3"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
             </div>
-          ))}
+            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-2"></div>
+          </div>
         </div>
-      ) : (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
-          >
-            <div className="space-y-4">
-              <div className="h-4 bg-gray-600 rounded w-1/2"></div>
-              <div className="h-4 bg-gray-600 rounded w-5/6"></div>
-              <div className="h-4 bg-gray-600 rounded w-3/4"></div>
-              <div className="h-4 bg-gray-600 rounded w-2/3"></div>
-              <div className="h-4 bg-gray-600 rounded w-1/4"></div>
+      ))}
+    </>
+  );
+
+  const renderAnalysis = () => (
+    <>
+      {[...Array(skeletonCount)].map((_, idx) => (
+        <div
+          key={idx}
+          className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+        >
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/3 mb-4"></div>
+              <div className="grid grid-cols-6 gap-2 items-end">
+                <div className="h-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                <div className="h-24 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                <div className="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                <div className="h-28 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                <div className="h-36 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                <div className="h-20 bg-gray-300 dark:bg-gray-600 rounded"></div>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/4 mb-4"></div>
+              <div className="h-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
             </div>
           </div>
-        ))
-      )}
-    </div>
+        </div>
+      ))}
+    </>
   );
+
+  const componentMap = {
+    table: renderTable,
+    chatbot: renderChatbot,
+    dropdown: renderDropdown,
+    logs: renderLogs,
+    default: renderDefault,
+    analysis: renderAnalysis,
+  };
+
+  const render = componentMap[component] || componentMap.default;
+
+  return <>{render()}</>;
 };
 
 export default SkeletonLoader;

frontend/src/conversation/ConversationBubble.tsx

@@ -351,15 +351,17 @@ const ConversationBubble = forwardRef<
                       </SyntaxHighlighter>
                       <div
                         className={`absolute right-3 top-3 lg:invisible 
-                        ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
+                         ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
                       >
                         <CopyButton
                           text={String(children).replace(/\n$/, '')}
                         />
                       </div>
                     </div>
                   ) : (
-                    <code className="whitespace-pre-line">{children}</code>
+                    <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
+                      {children}
+                    </code>
                   );
                 },
                 ul({ children }) {
@@ -382,33 +384,33 @@ const ConversationBubble = forwardRef<
                 },
                 table({ children }) {
                   return (
-                    <div className="relative overflow-x-auto rounded-lg border">
-                      <table className="w-full text-left text-sm text-gray-700">
+                    <div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
+                      <table className="w-full text-left text-gray-700 dark:text-bright-gray">
                         {children}
                       </table>
                     </div>
                   );
                 },
                 thead({ children }) {
                   return (
-                    <thead className="text-xs uppercase text-gray-900 [&>.table-row]:bg-gray-50">
+                    <thead className="text-xs uppercase text-gray-900 dark:text-bright-gray bg-gray-50 dark:bg-[#26272E]/50">
                       {children}
                     </thead>
                   );
                 },
                 tr({ children }) {
                   return (
-                    <tr className="table-row border-b odd:bg-white even:bg-gray-50">
+                    <tr className="border-b border-gray-200 dark:border-silver/40 odd:bg-white dark:odd:bg-[#26272E] even:bg-gray-50 dark:even:bg-[#26272E]/50">
                       {children}
                     </tr>
                   );
                 },
-                td({ children }) {
-                  return <td className="px-6 py-3">{children}</td>;
-                },
                 th({ children }) {
                   return <th className="px-6 py-3">{children}</th>;
                 },
+                td({ children }) {
+                  return <td className="px-6 py-3">{children}</td>;
+                },
               }}
             >
               {preprocessLaTeX(message)}

frontend/src/hooks/index.ts

@@ -112,3 +112,23 @@ export function useDarkTheme() {
 
   return [isDarkTheme, toggleTheme, componentMounted] as const;
 }
+
+export function useLoaderState(
+  initialState = false,
+  delay = 250,
+): [boolean, (value: boolean) => void] {
+  const [state, setState] = useState<boolean>(initialState);
+
+  const setLoaderState = (value: boolean) => {
+    if (value) {
+      setState(true);
+    } else {
+      // Only add delay when changing from true to false
+      setTimeout(() => {
+        setState(false);
+      }, delay);
+    }
+  };
+
+  return [state, setLoaderState];
+}