applying loader in the settings respective components

frontend/src/settings/Logs.tsx

@@ -1,20 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
 import Dropdown from '../components/Dropdown';
+import SkeletonLoader from '../utils/loader';
 import { APIKeyData, LogData } from './types';
 import CoppyButton from '../components/CopyButton';
 
 export default function Logs() {
-  const [chatbots, setChatbots] = React.useState<APIKeyData[]>([]);
-  const [selectedChatbot, setSelectedChatbot] =
-    React.useState<APIKeyData | null>();
-  const [logs, setLogs] = React.useState<LogData[]>([]);
-  const [page, setPage] = React.useState(1);
-  const [hasMore, setHasMore] = React.useState(true);
+  const [chatbots, setChatbots] = useState<APIKeyData[]>([]);
+  const [selectedChatbot, setSelectedChatbot] = useState<APIKeyData | null>();
+  const [logs, setLogs] = useState<LogData[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loadingChatbots, setLoadingChatbots] = useState(true);
+  const [loadingLogs, setLoadingLogs] = useState(true);
 
   const fetchChatbots = async () => {
+    setLoadingChatbots(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -24,10 +27,13 @@ export default function Logs() {
       setChatbots(chatbots);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingChatbots(false);
     }
   };
 
   const fetchLogs = async () => {
+    setLoadingLogs(true);
     try {
       const response = await userService.getLogs({
         page: page,
@@ -38,20 +44,23 @@ export default function Logs() {
         throw new Error('Failed to fetch logs');
       }
       const olderLogs = await response.json();
-      setLogs([...logs, ...olderLogs.logs]);
+      setLogs((prevLogs) => [...prevLogs, ...olderLogs.logs]);
       setHasMore(olderLogs.has_more);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingLogs(false);
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     fetchChatbots();
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hasMore) fetchLogs();
   }, [page, selectedChatbot]);
+
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
@@ -59,38 +68,47 @@ export default function Logs() {
           <p className="font-bold text-jet dark:text-bright-gray">
             Filter by chatbot
           </p>
-          <Dropdown
-            size="w-[55vw] sm:w-[360px]"
-            options={[
-              ...chatbots.map((chatbot) => ({
-                label: chatbot.name,
-                value: chatbot.id,
-              })),
-              { label: 'None', value: '' },
-            ]}
-            placeholder="Select chatbot"
-            onSelect={(chatbot: { label: string; value: string }) => {
-              setSelectedChatbot(
-                chatbots.find((item) => item.id === chatbot.value),
-              );
-              setLogs([]);
-              setPage(1);
-              setHasMore(true);
-            }}
-            selectedValue={
-              (selectedChatbot && {
-                label: selectedChatbot.name,
-                value: selectedChatbot.id,
-              }) ||
-              null
-            }
-            rounded="3xl"
-            border="border"
-          />
+          {loadingChatbots ? (
+            <SkeletonLoader count={1} />
+          ) : (
+            <Dropdown
+              size="w-[55vw] sm:w-[360px]"
+              options={[
+                ...chatbots.map((chatbot) => ({
+                  label: chatbot.name,
+                  value: chatbot.id,
+                })),
+                { label: 'None', value: '' },
+              ]}
+              placeholder="Select chatbot"
+              onSelect={(chatbot: { label: string; value: string }) => {
+                setSelectedChatbot(
+                  chatbots.find((item) => item.id === chatbot.value),
+                );
+                setLogs([]);
+                setPage(1);
+                setHasMore(true);
+              }}
+              selectedValue={
+                (selectedChatbot && {
+                  label: selectedChatbot.name,
+                  value: selectedChatbot.id,
+                }) ||
+                null
+              }
+              rounded="3xl"
+              border="border"
+            />
+          )}
         </div>
       </div>
+
       <div className="mt-8">
-        <LogsTable logs={logs} setPage={setPage} />
+        {loadingLogs ? (
+          <SkeletonLoader count={3} />
+        ) : (
+          <LogsTable logs={logs} setPage={setPage} />
+        )}
       </div>
     </div>
   );
@@ -102,15 +120,16 @@ type LogsTableProps = {
 };
 
 function LogsTable({ logs, setPage }: LogsTableProps) {
-  const observerRef = React.useRef<any>();
-  const firstObserver = React.useCallback((node: HTMLDivElement) => {
+  const observerRef = useRef<any>();
+  const firstObserver = useCallback((node: HTMLDivElement) => {
     if (observerRef.current) {
-      observerRef.current = new IntersectionObserver((enteries) => {
-        if (enteries[0].isIntersecting) setPage((prev) => prev + 1);
+      observerRef.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) setPage((prev) => prev + 1);
       });
     }
     if (node && observerRef.current) observerRef.current.observe(node);
   }, []);
+
   return (
     <div className="logs-table border rounded-2xl h-[55vh] w-full overflow-hidden border-silver dark:border-silver/40">
       <div className="h-8 bg-black/10 dark:bg-chinese-black flex flex-col items-start justify-center">