From a8d371045b6bbd19f8aad7eaed8a31c13340af46 Mon Sep 17 00:00:00 2001
From: Prathamesh Gursal <prathmeshgursal3110@gmail.com>
Date: Sun, 6 Oct 2024 11:40:58 +0530
Subject: [PATCH] updated the loader in settings

---
 frontend/src/settings/APIKeys.tsx   |  78 +++++++++-------
 frontend/src/settings/Analytics.tsx |  14 +--
 frontend/src/settings/Documents.tsx | 132 +++++++++++++++-------------
 3 files changed, 124 insertions(+), 100 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 4517e647..e05f3a1f 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
@@ -6,6 +6,7 @@ import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
 import { APIKeyData } from './types';
+import SkeletonLoader from '../utils/loader';
 
 export default function APIKeys() {
   const { t } = useTranslation();
@@ -13,8 +14,10 @@ export default function APIKeys() {
   const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
   const [newKey, setNewKey] = React.useState('');
   const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
+  const [loading, setLoading] = useState(true);
 
   const handleFetchKeys = async () => {
+    setLoading(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -24,6 +27,8 @@ export default function APIKeys() {
       setApiKeys(apiKeys);
     } catch (error) {
       console.log(error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -75,6 +80,7 @@ export default function APIKeys() {
   React.useEffect(() => {
     handleFetchKeys();
   }, []);
+
   return (
     <div className="mt-8">
       <div className="flex flex-col max-w-[876px]">
@@ -100,41 +106,45 @@ export default function APIKeys() {
         )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
-            <table className="table-default">
-              <thead>
-                <tr>
-                  <th>{t('settings.apiKeys.name')}</th>
-                  <th>{t('settings.apiKeys.sourceDoc')}</th>
-                  <th>{t('settings.apiKeys.key')}</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {!apiKeys?.length && (
+            {loading ? (
+              <SkeletonLoader count={3} />
+            ) : (
+              <table className="table-default">
+                <thead>
                   <tr>
-                    <td colSpan={4} className="!p-4">
-                      {t('settings.apiKeys.noData')}
-                    </td>
+                    <th>{t('settings.apiKeys.name')}</th>
+                    <th>{t('settings.apiKeys.sourceDoc')}</th>
+                    <th>{t('settings.apiKeys.key')}</th>
+                    <th></th>
                   </tr>
-                )}
-                {apiKeys?.map((element, index) => (
-                  <tr key={index}>
-                    <td>{element.name}</td>
-                    <td>{element.source}</td>
-                    <td>{element.key}</td>
-                    <td>
-                      <img
-                        src={Trash}
-                        alt="Delete"
-                        className="h-4 w-4 cursor-pointer hover:opacity-50"
-                        id={`img-${index}`}
-                        onClick={() => handleDeleteKey(element.id)}
-                      />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {!apiKeys?.length && (
+                    <tr>
+                      <td colSpan={4} className="!p-4">
+                        {t('settings.apiKeys.noData')}
+                      </td>
+                    </tr>
+                  )}
+                  {apiKeys?.map((element, index) => (
+                    <tr key={index}>
+                      <td>{element.name}</td>
+                      <td>{element.source}</td>
+                      <td>{element.key}</td>
+                      <td>
+                        <img
+                          src={Trash}
+                          alt="Delete"
+                          className="h-4 w-4 cursor-pointer hover:opacity-50"
+                          id={`img-${index}`}
+                          onClick={() => handleDeleteKey(element.id)}
+                        />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 2d22ab33..b736f6ad 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -63,9 +63,9 @@ export default function Analytics() {
     value: string;
   }>({ label: '30 Days', value: 'last_30_days' });
 
-  const [loadingMessages, setLoadingMessages] = useState(true); // Loading state for messages
-  const [loadingTokens, setLoadingTokens] = useState(true); // Loading state for tokens
-  const [loadingFeedback, setLoadingFeedback] = useState(true); // Loading state for feedback
+  const [loadingMessages, setLoadingMessages] = useState(true);
+  const [loadingTokens, setLoadingTokens] = useState(true);
+  const [loadingFeedback, setLoadingFeedback] = useState(true);
 
   const fetchChatbots = async () => {
     try {
@@ -81,7 +81,7 @@ export default function Analytics() {
   };
 
   const fetchMessagesData = async (chatbot_id?: string, filter?: string) => {
-    setLoadingMessages(true); // Start loading
+    setLoadingMessages(true);
     try {
       const response = await userService.getMessageAnalytics({
         api_key_id: chatbot_id,
@@ -95,7 +95,7 @@ export default function Analytics() {
     } catch (error) {
       console.error(error);
     } finally {
-      setLoadingMessages(false); // Stop loading
+      setLoadingMessages(false);
     }
   };
 
@@ -114,12 +114,12 @@ export default function Analytics() {
     } catch (error) {
       console.error(error);
     } finally {
-      setLoadingTokens(false); // Stop loading
+      setLoadingTokens(false);
     }
   };
 
   const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => {
-    setLoadingFeedback(true); // Start loading
+    setLoadingFeedback(true);
     try {
       const response = await userService.getFeedbackAnalytics({
         api_key_id: chatbot_id,
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index b45c968d..a5e5efb7 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -6,6 +7,7 @@ import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
 import DropdownMenu from '../components/DropdownMenu';
+import SkeletonLoader from '../utils/loader';
 import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
@@ -33,6 +35,7 @@ const Documents: React.FC<DocumentsProps> = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const [loading, setLoading] = useState(false);
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -41,6 +44,7 @@ const Documents: React.FC<DocumentsProps> = ({
   ];
 
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
+    setLoading(true);
     userService
       .manageSync({ source_id: doc.id, sync_frequency })
       .then(() => {
@@ -49,81 +53,91 @@ const Documents: React.FC<DocumentsProps> = ({
       .then((data) => {
         dispatch(setSourceDocs(data));
       })
-      .catch((error) => console.error(error));
+      .catch((error) => console.error(error))
+      .finally(() => {
+        setLoading(false);
+      });
   };
+
   return (
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
-          <table className="table-default">
-            <thead>
-              <tr>
-                <th>{t('settings.documents.name')}</th>
-                <th>{t('settings.documents.date')}</th>
-                <th>{t('settings.documents.tokenUsage')}</th>
-                <th>{t('settings.documents.type')}</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {!documents?.length && (
+          {loading ? (
+            <SkeletonLoader count={3} />
+          ) : (
+            <table className="table-default">
+              <thead>
                 <tr>
-                  <td colSpan={5} className="!p-4">
-                    {t('settings.documents.noData')}
-                  </td>
+                  <th>{t('settings.documents.name')}</th>
+                  <th>{t('settings.documents.date')}</th>
+                  <th>{t('settings.documents.tokenUsage')}</th>
+                  <th>{t('settings.documents.type')}</th>
+                  <th></th>
                 </tr>
-              )}
-              {documents &&
-                documents.map((document, index) => (
-                  <tr key={index}>
-                    <td>{document.name}</td>
-                    <td>{document.date}</td>
-                    <td>
-                      {document.tokens ? formatTokens(+document.tokens) : ''}
-                    </td>
-                    <td>
-                      {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
-                    </td>
-                    <td>
-                      <div className="flex flex-row items-center">
-                        {document.type !== 'remote' && (
-                          <img
-                            src={Trash}
-                            alt="Delete"
-                            className="h-4 w-4 cursor-pointer hover:opacity-50"
-                            id={`img-${index}`}
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              handleDeleteDocument(index, document);
-                            }}
-                          />
-                        )}
-                        {document.syncFrequency && (
-                          <div className="ml-2">
-                            <DropdownMenu
-                              name="Sync"
-                              options={syncOptions}
-                              onSelect={(value: string) => {
-                                handleManageSync(document, value);
-                              }}
-                              defaultValue={document.syncFrequency}
-                              icon={SyncIcon}
-                            />
-                          </div>
-                        )}
-                      </div>
+              </thead>
+              <tbody>
+                {!documents?.length && (
+                  <tr>
+                    <td colSpan={5} className="!p-4">
+                      {t('settings.documents.noData')}
                     </td>
                   </tr>
-                ))}
-            </tbody>
-          </table>
+                )}
+                {documents &&
+                  documents.map((document, index) => (
+                    <tr key={index}>
+                      <td>{document.name}</td>
+                      <td>{document.date}</td>
+                      <td>
+                        {document.tokens ? formatTokens(+document.tokens) : ''}
+                      </td>
+                      <td>
+                        {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
+                      </td>
+                      <td>
+                        <div className="flex flex-row items-center">
+                          {document.type !== 'remote' && (
+                            <img
+                              src={Trash}
+                              alt="Delete"
+                              className="h-4 w-4 cursor-pointer hover:opacity-50"
+                              id={`img-${index}`}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleDeleteDocument(index, document);
+                              }}
+                            />
+                          )}
+                          {document.syncFrequency && (
+                            <div className="ml-2">
+                              <DropdownMenu
+                                name="Sync"
+                                options={syncOptions}
+                                onSelect={(value: string) => {
+                                  handleManageSync(document, value);
+                                }}
+                                defaultValue={document.syncFrequency}
+                                icon={SyncIcon}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          )}
         </div>
       </div>
     </div>
   );
 };
+
 Documents.propTypes = {
   documents: PropTypes.array.isRequired,
   handleDeleteDocument: PropTypes.func.isRequired,
 };
+
 export default Documents;