(feat:loaders) loader for logs, dropdown

frontend/src/components/SkeletonLoader.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 interface SkeletonLoaderProps {
   count?: number;
-  component?: 'default' | 'analysis' | 'logs' | 'table' | 'chatbot';
+  component?: 'default' | 'analysis' | 'logs' | 'table' | 'chatbot' | 'logsTable' | 'dropdown';
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -59,10 +59,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     return (
       <>
         {[...Array(4)].map((_, idx) => (
-          <tr
-            key={idx}
-            className="animate-pulse"
-          >
+          <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>
@@ -81,6 +78,39 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     );
   }
 
+  if (component === 'dropdown') {
+    return (
+      <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>
+    );
+  }
+
+  if (component === 'logsTable') {
+    return (
+      <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>
+          </div>
+        ))}
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col space-y-4">
@@ -152,7 +182,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
             </div>
           ))}
         </>
-      )  : component === 'logs' ? (
+      ) : component === 'logs' ? (
         <>
           {[...Array(skeletonCount)].map((_, idx) => (
             <div
@@ -175,3 +205,5 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
 };
 
 export default SkeletonLoader;
+
+

frontend/src/settings/Documents.tsx

@@ -214,122 +214,118 @@ export default function Documents({
           </button>
         </div>
 
-         
-          <div className="flex flex-col flex-grow">
-            {' '}
-            <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
-              <table className="w-full min-w-[640px] table-auto">
-                <thead>
-                  <tr className="border-b border-gray-300 dark:border-silver/40">
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
-                      {t('settings.documents.name')}
-                    </th>
-                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
-                      <div className="flex justify-center items-center">
-                        {t('settings.documents.date')}
-                        <img
-                          className="cursor-pointer ml-2"
-                          onClick={() => refreshDocs('date')}
-                          src={caretSort}
-                          alt="sort"
-                        />
-                      </div>
-                    </th>
-                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
-                      <div className="flex justify-center items-center">
-                        <span className="hidden sm:inline">
-                          {t('settings.documents.tokenUsage')}
-                        </span>
-                        <span className="sm:hidden">
-                          {t('settings.documents.tokenUsage')}
-                        </span>
-                        <img
-                          className="cursor-pointer ml-2"
-                          onClick={() => refreshDocs('tokens')}
-                          src={caretSort}
-                          alt="sort"
-                        />
-                      </div>
-                    </th>
-                    <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
-                      <span className="sr-only">
-                        {t('settings.documents.actions')}
+        <div className="flex flex-col flex-grow">
+          {' '}
+          <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
+            <table className="w-full min-w-[640px] table-auto">
+              <thead>
+                <tr className="border-b border-gray-300 dark:border-silver/40">
+                  <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
+                    {t('settings.documents.name')}
+                  </th>
+                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.date')}
+                      <img
+                        className="cursor-pointer ml-2"
+                        onClick={() => refreshDocs('date')}
+                        src={caretSort}
+                        alt="sort"
+                      />
+                    </div>
+                  </th>
+                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
+                    <div className="flex justify-center items-center">
+                      <span className="hidden sm:inline">
+                        {t('settings.documents.tokenUsage')}
                       </span>
-                    </th>
+                      <span className="sm:hidden">
+                        {t('settings.documents.tokenUsage')}
+                      </span>
+                      <img
+                        className="cursor-pointer ml-2"
+                        onClick={() => refreshDocs('tokens')}
+                        src={caretSort}
+                        alt="sort"
+                      />
+                    </div>
+                  </th>
+                  <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
+                    <span className="sr-only">
+                      {t('settings.documents.actions')}
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
+                {loading ? (
+                  <SkeletonLoader component="table" />
+                ) : !currentDocuments?.length ? (
+                  <tr>
+                    <td
+                      colSpan={4}
+                      className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
+                    >
+                      {t('settings.documents.noData')}
+                    </td>
                   </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
-                  {loading ? (
-                    <SkeletonLoader component="table" />
-                  ) : !currentDocuments?.length ? (
-                    <tr>
+                ) : (
+                  currentDocuments.map((document, index) => (
+                    <tr
+                      key={index}
+                      className="group transition-colors"
+                      onClick={() => setShowDocumentChunks(document)}
+                    >
                       <td
-                        colSpan={4}
-                        className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
+                        className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                        title={document.name}
                       >
-                        {t('settings.documents.noData')}
+                        {document.name}
+                      </td>
+                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                        {document.date ? formatDate(document.date) : ''}
+                      </td>
+                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                        {document.tokens ? formatTokens(+document.tokens) : ''}
+                      </td>
+                      <td className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                        <div className="flex items-center justify-end gap-3">
+                          {!document.syncFrequency && (
+                            <div className="w-8"></div>
+                          )}
+                          {document.syncFrequency && (
+                            <DropdownMenu
+                              name={t('settings.documents.sync')}
+                              options={syncOptions}
+                              onSelect={(value: string) => {
+                                handleManageSync(document, value);
+                              }}
+                              defaultValue={document.syncFrequency}
+                              icon={SyncIcon}
+                            />
+                          )}
+                          <button
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              handleDeleteConfirmation(index, document);
+                            }}
+                            className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                          >
+                            <img
+                              src={Trash}
+                              alt={t('convTile.delete')}
+                              className="h-4 w-4 opacity-60 hover:opacity-100"
+                            />
+                          </button>
+                        </div>
                       </td>
                     </tr>
-                  ) : (
-                    currentDocuments.map((document, index) => (
-                      <tr
-                        key={index}
-                        className="group transition-colors"
-                        onClick={() => setShowDocumentChunks(document)}
-                      >
-                        <td
-                          className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
-                          title={document.name}
-                        >
-                          {document.name}
-                        </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                          {document.date ? formatDate(document.date) : ''}
-                        </td>
-                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                          {document.tokens
-                            ? formatTokens(+document.tokens)
-                            : ''}
-                        </td>
-                        <td className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                          <div className="flex items-center justify-end gap-3">
-                            {!document.syncFrequency && (
-                              <div className="w-8"></div>
-                            )}
-                            {document.syncFrequency && (
-                              <DropdownMenu
-                                name={t('settings.documents.sync')}
-                                options={syncOptions}
-                                onSelect={(value: string) => {
-                                  handleManageSync(document, value);
-                                }}
-                                defaultValue={document.syncFrequency}
-                                icon={SyncIcon}
-                              />
-                            )}
-                            <button
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                handleDeleteConfirmation(index, document);
-                              }}
-                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
-                            >
-                              <img
-                                src={Trash}
-                                alt={t('convTile.delete')}
-                                className="h-4 w-4 opacity-60 hover:opacity-100"
-                              />
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
+                  ))
+                )}
+              </tbody>
+            </table>
           </div>
-        
+        </div>
       </div>
 
       <div className="mt-auto pt-4">

frontend/src/settings/Logs.tsx

@@ -67,16 +67,16 @@ export default function Logs() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-        <div className="flex flex-col gap-3">
-          <label
-            id="chatbot-filter-label"
-            className="font-bold text-jet dark:text-bright-gray"
-          >
-            {t('settings.logs.filterByChatbot')}
-          </label>
-          {loadingChatbots ? (
-            <SkeletonLoader />
-          ) : (
+        {loadingChatbots ? (
+          <SkeletonLoader component="dropdown" />
+        ) : (
+          <div className="flex flex-col gap-3">
+            <label
+              id="chatbot-filter-label"
+              className="font-bold text-jet dark:text-bright-gray"
+            >
+              {t('settings.logs.filterByChatbot')}
+            </label>
             <Dropdown
               size="w-[55vw] sm:w-[360px]"
               options={[
@@ -105,16 +105,12 @@ export default function Logs() {
               rounded="3xl"
               border="border"
             />
-          )}
-        </div>
+          </div>
+        )}
       </div>
 
       <div className="mt-8">
-        {loadingLogs ? (
-          <SkeletonLoader component={'logs'} />
-        ) : (
-          <LogsTable logs={logs} setPage={setPage} />
-        )}
+        <LogsTable logs={logs} setPage={setPage} loading={loadingLogs} />
       </div>
     </div>
   );
@@ -123,9 +119,10 @@ export default function Logs() {
 type LogsTableProps = {
   logs: LogData[];
   setPage: React.Dispatch<React.SetStateAction<number>>;
+  loading: boolean;
 };
 
-function LogsTable({ logs, setPage }: LogsTableProps) {
+function LogsTable({ logs, setPage, loading }: LogsTableProps) {
   const { t } = useTranslation();
   const observerRef = useRef<any>();
   const firstObserver = useCallback((node: HTMLDivElement) => {
@@ -148,15 +145,19 @@ function LogsTable({ logs, setPage }: LogsTableProps) {
         ref={observerRef}
         className="flex flex-col items-start h-[51vh] overflow-y-auto bg-transparent flex-grow gap-px"
       >
-        {logs.map((log, index) => {
-          if (index === logs.length - 1) {
-            return (
-              <div ref={firstObserver} key={index}>
-                <Log log={log} />
-              </div>
-            );
-          } else return <Log key={index} log={log} />;
-        })}
+        {loading ? (
+          <SkeletonLoader component="logsTable" />
+        ) : (
+          logs.map((log, index) => {
+            if (index === logs.length - 1) {
+              return (
+                <div ref={firstObserver} key={index}>
+                  <Log log={log} />
+                </div>
+              );
+            } else return <Log key={index} log={log} />;
+          })
+        )}
       </div>
     </div>
   );