From ac1b1c3cdd1c8ec43835e8205c0faa3d3b343f84 Mon Sep 17 00:00:00 2001
From: Siddhant Rai <siddhant.rai.5686@gmail.com>
Date: Wed, 19 Feb 2025 13:58:40 +0530
Subject: [PATCH] feat: add loading spinner to AddToolModal and improve label
 spacing in General settings

---
 frontend/src/modals/AddToolModal.tsx |  83 +++++++------
 frontend/src/settings/General.tsx    |   2 +-
 frontend/src/settings/Tools.tsx      | 172 +++++++++++++++------------
 3 files changed, 142 insertions(+), 115 deletions(-)

diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index c8652c5b..8b4e98be 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -7,6 +7,7 @@ import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
 import ConfigToolModal from './ConfigToolModal';
 import { AvailableToolType } from './types';
+import Spinner from '../components/Spinner';
 
 export default function AddToolModal({
   message,
@@ -21,6 +22,8 @@ export default function AddToolModal({
   getUserTools: () => void;
   onToolAdded: (toolId: string) => void;
 }) {
+  const { t } = useTranslation();
+  const modalRef = useRef<HTMLDivElement>(null);
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
   >([]);
@@ -28,8 +31,7 @@ export default function AddToolModal({
     React.useState<AvailableToolType | null>(null);
   const [configModalState, setConfigModalState] =
     React.useState<ActiveState>('INACTIVE');
-  const modalRef = useRef<HTMLDivElement>(null);
-  const { t } = useTranslation();
+  const [loading, setLoading] = React.useState(false);
 
   useOutsideAlerter(modalRef, () => {
     if (modalState === 'ACTIVE') {
@@ -38,6 +40,7 @@ export default function AddToolModal({
   }, [modalState]);
 
   const getAvailableTools = () => {
+    setLoading(true);
     userService
       .getAvailableTools()
       .then((res) => {
@@ -45,6 +48,7 @@ export default function AddToolModal({
       })
       .then((data) => {
         setAvailableTools(data.data);
+        setLoading(false);
       });
   };
 
@@ -85,7 +89,6 @@ export default function AddToolModal({
   React.useEffect(() => {
     if (modalState === 'ACTIVE') getAvailableTools();
   }, [modalState]);
-
   return (
     <>
       <div
@@ -115,44 +118,50 @@ export default function AddToolModal({
                 {t('settings.tools.selectToolSetup')}
               </h2>
               <div className="mt-5 flex flex-col sm:grid sm:grid-cols-3 gap-4 h-[73vh] overflow-auto px-3 py-px">
-                {availableTools.map((tool, index) => (
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    key={index}
-                    className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
-                    onClick={() => {
-                      setSelectedTool(tool);
-                      handleAddTool(tool);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                {loading ? (
+                  <div className="h-full col-span-3 flex items-center justify-center">
+                    <Spinner />
+                  </div>
+                ) : (
+                  availableTools.map((tool, index) => (
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      key={index}
+                      className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
+                      onClick={() => {
                         setSelectedTool(tool);
                         handleAddTool(tool);
-                      }
-                    }}
-                  >
-                    <div className="w-full">
-                      <div className="px-1 w-full flex items-center justify-between">
-                        <img
-                          src={`/toolIcons/tool_${tool.name}.svg`}
-                          className="h-8 w-8"
-                        />
-                      </div>
-                      <div className="mt-[9px]">
-                        <p
-                          title={tool.displayName}
-                          className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize truncate"
-                        >
-                          {tool.displayName}
-                        </p>
-                        <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">
-                          {tool.description}
-                        </p>
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          setSelectedTool(tool);
+                          handleAddTool(tool);
+                        }
+                      }}
+                    >
+                      <div className="w-full">
+                        <div className="px-1 w-full flex items-center justify-between">
+                          <img
+                            src={`/toolIcons/tool_${tool.name}.svg`}
+                            className="h-8 w-8"
+                          />
+                        </div>
+                        <div className="mt-[9px]">
+                          <p
+                            title={tool.displayName}
+                            className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize truncate"
+                          >
+                            {tool.displayName}
+                          </p>
+                          <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">
+                            {tool.description}
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))
+                )}
               </div>
             </div>
           </div>
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index d974eab7..86c4f4ab 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -84,7 +84,7 @@ export default function General() {
   return (
     <div className="mt-12">
       <div className="mb-5">
-        <label className="block font-bold text-jet dark:text-bright-gray">
+        <label className="block mb-2 font-bold text-jet dark:text-bright-gray">
           {t('settings.general.selectTheme')}
         </label>
         <Dropdown
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index 0d45b9ba..e697bb96 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -6,6 +6,7 @@ import CogwheelIcon from '../assets/cogwheel.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import Input from '../components/Input';
+import Spinner from '../components/Spinner';
 import { useDarkTheme } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import { ActiveState } from '../models/misc';
@@ -22,8 +23,10 @@ export default function Tools() {
   const [selectedTool, setSelectedTool] = React.useState<
     UserToolType | APIToolType | null
   >(null);
+  const [loading, setLoading] = React.useState(false);
 
   const getUserTools = () => {
+    setLoading(true);
     userService
       .getUserTools()
       .then((res) => {
@@ -31,6 +34,11 @@ export default function Tools() {
       })
       .then((data) => {
         setUserTools(data.tools);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error('Error fetching tools:', error);
+        setLoading(false);
       });
   };
 
@@ -78,7 +86,6 @@ export default function Tools() {
   React.useEffect(() => {
     getUserTools();
   }, []);
-
   return (
     <div>
       {selectedTool ? (
@@ -115,88 +122,99 @@ export default function Tools() {
                 {t('settings.tools.addTool')}
               </button>
             </div>
-            <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
-              {userTools.filter((tool) =>
-                tool.displayName
-                  .toLowerCase()
-                  .includes(searchTerm.toLowerCase()),
-              ).length === 0 ? (
-                <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
-                  <img
-                    src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                    alt="No tools found"
-                    className="h-24 w-24 mx-auto mb-2"
-                  />
-                  {t('settings.tools.noToolsFound')}
+            {loading ? (
+              <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
+                <div className="mt-24 h-32 col-span-2 lg:col-span-3 flex items-center justify-center">
+                  <Spinner />
                 </div>
-              ) : (
-                userTools
-                  .filter((tool) =>
-                    tool.displayName
-                      .toLowerCase()
-                      .includes(searchTerm.toLowerCase()),
-                  )
-                  .map((tool, index) => (
-                    <div
-                      key={index}
-                      className="relative h-56 w-full p-6 border rounded-2xl border-silver dark:border-silver/40 flex flex-col justify-between"
-                    >
-                      <div className="w-full">
-                        <div className="w-full flex items-center justify-between">
-                          <img
-                            src={`/toolIcons/tool_${tool.name}.svg`}
-                            alt={`${tool.displayName} icon`}
-                            className="h-8 w-8"
-                          />
-                          <button
-                            className="absolute top-3 right-3 cursor-pointer"
-                            onClick={() => handleSettingsClick(tool)}
-                            aria-label={t('settings.tools.configureToolAria', {
-                              toolName: tool.displayName,
-                            })}
-                          >
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
+                {userTools.filter((tool) =>
+                  tool.displayName
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase()),
+                ).length === 0 ? (
+                  <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
+                    <img
+                      src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                      alt="No tools found"
+                      className="h-24 w-24 mx-auto mb-2"
+                    />
+                    {t('settings.tools.noToolsFound')}
+                  </div>
+                ) : (
+                  userTools
+                    .filter((tool) =>
+                      tool.displayName
+                        .toLowerCase()
+                        .includes(searchTerm.toLowerCase()),
+                    )
+                    .map((tool, index) => (
+                      <div
+                        key={index}
+                        className="relative h-56 w-full p-6 border rounded-2xl border-silver dark:border-silver/40 flex flex-col justify-between"
+                      >
+                        <div className="w-full">
+                          <div className="w-full flex items-center justify-between">
                             <img
-                              src={CogwheelIcon}
-                              alt={t('settings.tools.settingsIconAlt')}
-                              className="h-[19px] w-[19px]"
+                              src={`/toolIcons/tool_${tool.name}.svg`}
+                              alt={`${tool.displayName} icon`}
+                              className="h-8 w-8"
                             />
-                          </button>
+                            <button
+                              className="absolute top-3 right-3 cursor-pointer"
+                              onClick={() => handleSettingsClick(tool)}
+                              aria-label={t(
+                                'settings.tools.configureToolAria',
+                                {
+                                  toolName: tool.displayName,
+                                },
+                              )}
+                            >
+                              <img
+                                src={CogwheelIcon}
+                                alt={t('settings.tools.settingsIconAlt')}
+                                className="h-[19px] w-[19px]"
+                              />
+                            </button>
+                          </div>
+                          <div className="mt-[9px]">
+                            <p className="text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed">
+                              {tool.displayName}
+                            </p>
+                            <p className="mt-1 h-16 overflow-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed pr-1">
+                              {tool.description}
+                            </p>
+                          </div>
                         </div>
-                        <div className="mt-[9px]">
-                          <p className="text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed">
-                            {tool.displayName}
-                          </p>
-                          <p className="mt-1 h-16 overflow-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed pr-1">
-                            {tool.description}
-                          </p>
+                        <div className="absolute bottom-3 right-3">
+                          <label
+                            htmlFor={`toolToggle-${index}`}
+                            className="relative inline-block h-6 w-10 cursor-pointer rounded-full bg-gray-300 dark:bg-[#D2D5DA33]/20 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-[#0C9D35CC] has-[:checked]:dark:bg-[#0C9D35CC]"
+                          >
+                            <span className="sr-only">
+                              {t('settings.tools.toggleToolAria', {
+                                toolName: tool.displayName,
+                              })}
+                            </span>
+                            <input
+                              type="checkbox"
+                              id={`toolToggle-${index}`}
+                              className="peer sr-only"
+                              checked={tool.status}
+                              onChange={() =>
+                                updateToolStatus(tool.id, !tool.status)
+                              }
+                            />
+                            <span className="absolute inset-y-0 start-0 m-[3px] size-[18px] rounded-full bg-white transition-all peer-checked:start-4"></span>
+                          </label>
                         </div>
                       </div>
-                      <div className="absolute bottom-3 right-3">
-                        <label
-                          htmlFor={`toolToggle-${index}`}
-                          className="relative inline-block h-6 w-10 cursor-pointer rounded-full bg-gray-300 dark:bg-[#D2D5DA33]/20 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-[#0C9D35CC] has-[:checked]:dark:bg-[#0C9D35CC]"
-                        >
-                          <span className="sr-only">
-                            {t('settings.tools.toggleToolAria', {
-                              toolName: tool.displayName,
-                            })}
-                          </span>
-                          <input
-                            type="checkbox"
-                            id={`toolToggle-${index}`}
-                            className="peer sr-only"
-                            checked={tool.status}
-                            onChange={() =>
-                              updateToolStatus(tool.id, !tool.status)
-                            }
-                          />
-                          <span className="absolute inset-y-0 start-0 m-[3px] size-[18px] rounded-full bg-white transition-all peer-checked:start-4"></span>
-                        </label>
-                      </div>
-                    </div>
-                  ))
-              )}
-            </div>
+                    ))
+                )}
+              </div>
+            )}
           </div>
           <AddToolModal
             message={t('settings.tools.selectToolSetup')}