From d45d179c93aafbda0d53179e4756b284bd9c816a Mon Sep 17 00:00:00 2001
From: David Quartey <42542676+DavidQuartz@users.noreply.github.com>
Date: Mon, 13 Jun 2022 07:38:23 +0000
Subject: [PATCH] [Fixes #966] Provide visual feedback while loading filtered
 resources (#1015)

---
 .../client/js/components/FiltersMenu/FiltersMenu.jsx      | 8 +++++---
 .../client/themes/geonode/less/_menu.less                 | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
index fa5d13b6a0..78efa46849 100644
--- 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
index 232d2a73f6..247a179209 100644
--- 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;