fix: [DHIS2-18958] Add loading functionality to Search in all program…

…s button (#3965) * fix: add loading functionality * fix: move use state to top * feat: add loading spinner to page change
dhis2 · Feb 17, 2025 · 6486942 · 6486942
1 parent a366238
commit 6486942
Showing 1 changed file with 58 additions and 29 deletions.
diff --git a/src/core_modules/capture-core/components/SearchBox/SearchResults/SearchResults.component.js b/src/core_modules/capture-core/components/SearchBox/SearchResults/SearchResults.component.js
@@ -1,9 +1,14 @@
 // @flow
-import React, { type ComponentType, useContext, useState } from 'react';
+import React, {
+    type ComponentType,
+    useContext,
+    useState,
+    useEffect,
+} from 'react';
 import { withStyles } from '@material-ui/core';
 import i18n from '@dhis2/d2-i18n';
 import { Pagination } from 'capture-ui';
-import { Button, colors } from '@dhis2/ui';
+import { Button, CircularLoader, colors } from '@dhis2/ui';
 import { CardList, CardListButtons } from '../../CardList';
 import { withNavigation } from '../../Pagination/withDefaultNavigation';
 import { searchScopes } from '../SearchBox.constants';
@@ -30,6 +35,12 @@ export const getStyles = (theme: Theme) => ({
         marginTop: theme.typography.pxToRem(12),
         marginBottom: theme.typography.pxToRem(12),
     },
+    loadingMask: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: theme.typography.pxToRem(545),
+    },
 });
 
 
@@ -55,6 +66,8 @@ export const SearchResultsIndex = ({
     const { resultsPageSize } = useContext(ResultsPageSizeContext);
     const [isTopResultsOpen, setTopResultsOpen] = useState(true);
     const [isOtherResultsOpen, setOtherResultsOpen] = useState(true);
+    const [isFallbackLoading, setIsFallbackLoading] = useState(false);
+
     const handlePageChange = (newPage) => {
         switch (currentSearchScopeType) {
         case searchScopes.PROGRAM:
@@ -79,6 +92,7 @@ export const SearchResultsIndex = ({
     };
 
     const handleOtherPageChange = (newOtherPage) => {
+        setIsFallbackLoading(true);
         startFallbackSearch({
             programId: currentSearchScopeId,
             formId: currentFormId,
@@ -87,14 +101,20 @@ export const SearchResultsIndex = ({
         });
     };
 
+    useEffect(() => {
+        if (otherResults !== undefined) {
+            setIsFallbackLoading(false);
+        }
+    }, [otherResults]);
+
     const handleFallbackSearch = () => {
+        setIsFallbackLoading(true);
         startFallbackSearch({
             programId: currentSearchScopeId,
             formId: currentFormId,
             resultsPageSize,
         });
     };
-
     const currentProgramId = (currentSearchScopeType === searchScopes.PROGRAM) ? currentSearchScopeId : '';
 
     const { trackedEntityName } = useScopeInfo(currentSearchScopeId);
@@ -145,23 +165,29 @@ export const SearchResultsIndex = ({
             onClose={() => setOtherResultsOpen(false)}
             onOpen={() => setOtherResultsOpen(true)}
         >
-            <CardList
-                noItemsText={i18n.t('No results found')}
-                currentSearchScopeName={currentSearchScopeName}
-                currentSearchScopeType={searchScopes.ALL_PROGRAMS}
-                items={otherResults}
-                dataElements={dataElements}
-                renderCustomCardActions={({
-                    item, enrollmentType, currentSearchScopeType: searchScopeType, programName,
-                }) => (<CardListButtons
-                    programName={programName}
-                    currentSearchScopeType={searchScopeType}
-                    currentSearchScopeId={currentSearchScopeId}
-                    id={item.id}
-                    orgUnitId={orgUnitId}
-                    enrollmentType={enrollmentType}
-                />)}
-            />
+            {isFallbackLoading ? (
+                <div className={classes.loadingMask}>
+                    <CircularLoader />
+                </div>
+            ) : (
+                <CardList
+                    noItemsText={i18n.t('No results found')}
+                    currentSearchScopeName={currentSearchScopeName}
+                    currentSearchScopeType={searchScopes.ALL_PROGRAMS}
+                    items={otherResults}
+                    dataElements={dataElements}
+                    renderCustomCardActions={({
+                        item, enrollmentType, currentSearchScopeType: searchScopeType, programName,
+                    }) => (<CardListButtons
+                        programName={programName}
+                        currentSearchScopeType={searchScopeType}
+                        currentSearchScopeId={currentSearchScopeId}
+                        id={item.id}
+                        orgUnitId={orgUnitId}
+                        enrollmentType={enrollmentType}
+                    />)}
+                />
+            )}
             <div className={classes.pagination}>
                 <SearchPagination
                     nextPageButtonDisabled={otherResults.length < resultsPageSize}
@@ -172,16 +198,19 @@ export const SearchResultsIndex = ({
         </Widget>}
         {
             currentSearchScopeType === searchScopes.PROGRAM && !fallbackTriggered && otherResults === undefined &&
-
-                <div className={classes.bottom}>
-                    <div className={classes.bottomText}>
-                        {i18n.t('Not finding the results you were looking for? Try to search all programs that use type ')}&quot;{trackedEntityName}&quot;.
-                    </div>
-
-                    <Button onClick={handleFallbackSearch} dataTest="fallback-search-button">
-                        {i18n.t('Search in all programs')}
-                    </Button>
+            <div className={classes.bottom}>
+                <div className={classes.bottomText}>
+                    {i18n.t('Not finding the results you were looking for? Try to search all programs that use type ')}&quot;{trackedEntityName}&quot;.
                 </div>
+
+                <Button
+                    onClick={handleFallbackSearch}
+                    dataTest="fallback-search-button"
+                    loading={isFallbackLoading}
+                >
+                    {i18n.t('Search in all programs')}
+                </Button>
+            </div>
         }
         <div className={classes.bottom}>
             <div className={classes.bottomText}>