Merge pull request #968 from opensrp/953-locations-eternal-loader

Do no show eternal loader in locations
onaio · Apr 13, 2022 · 36de387 · 36de387
2 parents 31db3ce + 3ba5052
commit 36de387
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 19 deletions.
diff --git a/packages/location-management/src/components/LocationUnitList/index.tsx b/packages/location-management/src/components/LocationUnitList/index.tsx
@@ -87,18 +87,15 @@ export const LocationUnitList: React.FC<Props> = (props: Props) => {
   );
 
   const treeDataQuery = useQueries(
-    locationUnits.data
-      ? locationUnits.data.map((location) => {
-          return {
-            queryKey: [LOCATION_HIERARCHY, location.id],
-            queryFn: () => new OpenSRPService(LOCATION_HIERARCHY, opensrpBaseURL).read(location.id),
-            onError: () => sendErrorNotification(lang.ERROR_OCCURRED),
-            // Todo : useQueries doesn't support select or types yet https://github.com/tannerlinsley/react-query/pull/1527
-            select: (res: RawOpenSRPHierarchy) => generateJurisdictionTree(res).model,
-          };
-        })
-      : []
-  ) as UseQueryResult<ParsedHierarchyNode>[];
+    (locationUnits.data ?? []).map((location) => {
+      return {
+        queryKey: [LOCATION_HIERARCHY, location.id],
+        queryFn: () => new OpenSRPService(LOCATION_HIERARCHY, opensrpBaseURL).read(location.id),
+        onError: () => sendErrorNotification(lang.ERROR_OCCURRED),
+        select: (res: RawOpenSRPHierarchy) => generateJurisdictionTree(res).model,
+      };
+    })
+  ) as UseQueryResult<ParsedHierarchyNode | undefined>[];
 
   const treeData = treeDataQuery
     .map((query) => query.data)
@@ -128,14 +125,13 @@ export const LocationUnitList: React.FC<Props> = (props: Props) => {
     }
   }, [treeDataQuery, currentClickedNode]);
 
+  // show loader only if all hierarchy queries are loading
   if (
-    tableData.length === 0 ||
-    treeData.length === 0 ||
-    !locationUnits.data ||
-    treeData.length !== locationUnits.data.length
-  )
-    return <Spin size={'large'} />;
-
+    locationUnits.isLoading ||
+    (treeDataQuery.length > 0 && treeDataQuery.every((query) => query.isLoading))
+  ) {
+    return <Spin size="large" className="custom-spinner" />;
+  }
   return (
     <section className="layout-content">
       <Helmet>

diff --git a/packages/location-management/src/components/LocationUnitList/tests/index.test.tsx b/packages/location-management/src/components/LocationUnitList/tests/index.test.tsx
@@ -28,6 +28,8 @@ import {
 import { ParsedHierarchyNode } from '../../../ducks/locationHierarchy/types';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { TableData } from '../Table';
+import toJson from 'enzyme-to-json';
+import { waitFor } from '@testing-library/react';
 
 reducerRegistry.register(locationUnitsReducerName, locationUnitsReducer);
 reducerRegistry.register(locationHierarchyReducerName, locationHierarchyReducer);
@@ -377,4 +379,48 @@ describe('location-management/src/components/LocationUnitList', () => {
     });
     wrapper.unmount();
   });
+
+  it('responds correctly to no locations', async () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    fetch.mockResponse(JSON.stringify([]));
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          cacheTime: 0,
+        },
+      },
+    });
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <QueryClientProvider client={queryClient}>
+            <LocationUnitList opensrpBaseURL={baseURL} />
+          </QueryClientProvider>
+        </Router>
+      </Provider>,
+      { attachTo: div }
+    );
+
+    expect(toJson(wrapper.find('.ant-spin'))).toBeTruthy();
+
+    await waitFor(async () => {
+      await flushPromises();
+      // loader, no longer - 🤣
+      expect(document.querySelector('.ant-spin')).not.toBeInTheDocument();
+    });
+
+    wrapper.update();
+
+    // table says no data
+    const tableText = wrapper.find('table').text();
+    expect(tableText).toContain('No Data');
+    expect(tableText).toMatchInlineSnapshot(`"NameLevelActionsNo Data"`);
+    expect(tableText).toMatchInlineSnapshot(`"NameLevelActionsNo Data"`);
+    wrapper.unmount();
+  });
 });