[515] 🔧 Explorer - fix loading indicator (#536)

fix loading indicator on explorer
OWASP · Jul 29, 2024 · f74a6d5 · f74a6d5
1 parent 096b48a
commit f74a6d5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/application/frontend/src/pages/Explorer/explorer.tsx b/application/frontend/src/pages/Explorer/explorer.tsx
@@ -14,6 +14,7 @@ import { LinkedStandards } from './LinkedStandards';
 
 export const Explorer = () => {
   const { dataLoading, dataTree } = useDataStore();
+  const [loading, setLoading] = useState<boolean>(false);
   const [filter, setFilter] = useState('');
   const [filteredTree, setFilteredTree] = useState<TreeDocument[]>();
   const applyHighlight = (text, term) => {
@@ -78,6 +79,10 @@ export const Explorer = () => {
     }
   }, [filter, dataTree, setFilteredTree]);
 
+  useEffect(() => {
+    setLoading(dataLoading);
+  }, [dataLoading]);
+
   function processNode(item) {
     if (!item) {
       return <></>;
@@ -121,6 +126,7 @@ export const Explorer = () => {
       </List.Item>
     );
   }
+
   function update(event) {
     setFilter(event.target.value.toLowerCase());
   }
@@ -163,7 +169,7 @@ export const Explorer = () => {
             </a>*/}
           </div>
         </div>
-        <LoadingAndErrorIndicator loading={dataLoading} error={null} />
+        <LoadingAndErrorIndicator loading={loading} error={null} />
         <List>
           {filteredTree?.map((item) => {
             return processNode(item);

diff --git a/application/frontend/src/providers/DataProvider.tsx b/application/frontend/src/providers/DataProvider.tsx
@@ -24,7 +24,7 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
   const { apiUrl } = useEnvironment();
   const [dataLoading, setDataLoading] = useState<boolean>(false);
   const [dataStore, setDataStore] = useState<Record<string, TreeDocument>>(
-    getLocalStorageObject(DATA_STORE_KEY) || {}
+    getLocalStorageObject(DATA_STORE_KEY) || {},
   );
   const [dataTree, setDataTree] = useState<TreeDocument[]>(getLocalStorageObject(DATA_TREE_KEY) || []);
 
@@ -42,7 +42,7 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
 
     const initialLinks = storedDoc.links;
     let creLinks = initialLinks.filter(
-      (x) => x.document && !keyPath.includes(getStoreKey(x.document)) && getStoreKey(x.document) in dataStore
+      (x) => x.document && !keyPath.includes(getStoreKey(x.document)) && getStoreKey(x.document) in dataStore,
     );
 
     if (!creLinks.length) {
@@ -59,7 +59,7 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
     //attach Standards to the CREs
     const standards = initialLinks.filter(
       (link) =>
-        link.document && link.document.doctype === 'Standard' && !keyPath.includes(getStoreKey(link.document))
+        link.document && link.document.doctype === 'Standard' && !keyPath.includes(getStoreKey(link.document)),
     );
     storedDoc.links = [...creLinks, ...standards];
 
@@ -70,7 +70,6 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
     'root_cres',
     async () => {
       if (!dataTree.length && Object.keys(dataStore).length) {
-        setDataLoading(true);
         try {
           const result = await axios.get(`${apiUrl}/root_cres`);
           const treeData = result.data.data.map((x) => buildTree(x));
@@ -84,18 +83,14 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
     {
       retry: false,
       enabled: false,
-      onSettled: () => {
-        setDataLoading(false);
-      },
-    }
+    },
   );
 
   const getStoreQuery = useQuery(
     'all_cres',
     async () => {
       if (!Object.keys(dataStore).length) {
         try {
-          setDataLoading(true);
           const result = await axios.get(`${apiUrl}/all_cres`);
           let data = result.data.data;
           const page = result.data.page;
@@ -128,18 +123,18 @@ export const DataProvider = ({ children }: { children: React.ReactNode }) => {
     {
       retry: false,
       enabled: false,
-      onSettled: () => {
-        setDataLoading(false);
-      },
-    }
+    },
   );
+
+  useEffect(() => {
+    setDataLoading(getStoreQuery.isLoading || getTreeQuery.isLoading);
+  }, [getStoreQuery.isLoading, getTreeQuery.isLoading]);
+
   useEffect(() => {
-    setDataLoading(true);
     getStoreQuery.refetch();
   }, [dataTree]);
 
   useEffect(() => {
-    setDataLoading(true);
     getTreeQuery.refetch();
   }, [dataStore, setDataStore]);