[Fixes 966] Provide visual feedback while loading filtered resources (#…

…996)
GeoNode · May 31, 2022 · 4dc178c · 4dc178c
1 parent 1188a0c
commit 4dc178c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
@@ -16,6 +16,7 @@ import FaIcon from '@js/components/FaIcon';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import Menu from '@js/components/Menu';
 import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
+import Spinner from '@js/components/Spinner/Spinner';
 
 const ButtonWithTooltip = tooltip(Button);
 
@@ -28,7 +29,8 @@ const FiltersMenu = forwardRef(({
     onClick,
     defaultLabelId,
     totalResources,
-    totalFilters
+    totalFilters,
+    loading
 }, ref) => {
 
     const { isMobile } = getConfigProp('geoNodeSettings');
@@ -63,9 +65,9 @@ const FiltersMenu = forwardRef(({
                             {isMobile ? <FaIcon name="filter" /> : <Message msgId="gnhome.filter"/>}
                         </Button>}
                         {' '}
-                        <Badge>
+                        {loading ? <span className="resources-count-loading"><Spinner /></span> : <Badge>
                             <span className="resources-count"> <Message msgId="gnhome.resourcesFound" msgParams={{ count: totalResources }}/> </span>
-                        </Badge>
+                        </Badge>}
                     </div>
                     <Menu
                         items={cardsMenu}

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu.less b/geonode_mapstore_client/client/themes/geonode/less/_menu.less
@@ -219,6 +219,9 @@ nav.hide-navigation#gn-topbar {
         .resources-count {
             padding: 0em 0.2em;
         }
+        .resources-count-loading {
+            padding: 0em 1em;
+        }
         .badge {
             font-weight: normal;
             background-color: transparent;