Add loading spinner beside the "# resources found" (#612)

GeoNode · Nov 23, 2021 · 4fbe941 · 4fbe941
1 parent b16eec8
commit 4fbe941
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
@@ -14,6 +14,7 @@ import Message from '@mapstore/framework/components/I18N/Message';
 import FaIcon from '@js/components/FaIcon';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import Menu from '@js/components/Menu';
+import Spinner from '@js/components/Spinner';
 
 const FiltersMenu = forwardRef(({
     formatHref,
@@ -26,7 +27,8 @@ const FiltersMenu = forwardRef(({
     onClear,
     totalResources,
     totalFilters,
-    filtersActive
+    filtersActive,
+    loading
 }, ref) => {
 
     const selectedSort = orderOptions.find(({ value }) => order === value);
@@ -63,7 +65,7 @@ const FiltersMenu = forwardRef(({
                                 </span>
 
                             }
-
+                            {loading && <Spinner spinnerName="circle" style={{"float": "right", "paddingLeft": "0.7em"}}noFadeIn/> }
                         </Badge>
                     </div>
                     <Menu

diff --git a/geonode_mapstore_client/client/js/routes/Detail.jsx b/geonode_mapstore_client/client/js/routes/Detail.jsx
@@ -66,7 +66,8 @@ function Detail({
     width,
     resource,
     totalResources,
-    siteName
+    siteName,
+    loading
 }) {
 
     const {
@@ -156,7 +157,10 @@ function Detail({
                             totalResources={totalResources}
                             totalFilters={queryFilters.length}
                             filtersActive={!!(queryFilters.length > 0)}
+                            loading={loading}
+
                         />
+
                     </ConnectedCardGrid>
                 </div>
                 {!!resource &&
@@ -208,15 +212,17 @@ const ConnectedDetail = connect(
         state => state?.controls?.gnFiltersPanel?.enabled || null,
         getParsedGeoNodeConfiguration,
         getTotalResources,
-        state => state?.gnsettings?.siteName || "Geonode"
-    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName) => ({
+        state => state?.gnsettings?.siteName || "Geonode",
+        state => state?.gnsearch?.loading || false
+    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName, loading) => ({
         params,
         user,
         resource,
         isFiltersPanelEnabled,
         config,
         totalResources,
-        siteName
+        siteName,
+        loading
     })),
     {
         onSearch: searchResources,

diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx
@@ -59,7 +59,8 @@ function Home({
     user,
     width,
     totalResources,
-    fetchFeaturedResources = () => {}
+    fetchFeaturedResources = () => {},
+    loading
 }) {
 
     const cataloguePage = '/catalogue/';
@@ -141,6 +142,7 @@ function Home({
                             totalResources={totalResources}
                             totalFilters={queryFilters.length}
                             filtersActive={!!(queryFilters.length > 0)}
+                            loading={loading}
                         />
                     </ConnectedCardGrid>
                 </div>
@@ -174,12 +176,14 @@ const ConnectedHome = connect(
         state => state?.gnsearch?.params || DEFAULT_PARAMS,
         userSelector,
         getParsedGeoNodeConfiguration,
-        getTotalResources
-    ], (params, user, config, totalResources) => ({
+        getTotalResources,
+        state => state?.gnsearch?.loading || false
+    ], (params, user, config, totalResources, loading) => ({
         params,
         user,
         config,
-        totalResources
+        totalResources,
+        loading
     })),
     {
         onSearch: searchResources,

diff --git a/geonode_mapstore_client/client/js/routes/Search.jsx b/geonode_mapstore_client/client/js/routes/Search.jsx
@@ -77,9 +77,9 @@ function Search({
     width,
     totalResources,
     resource,
-    siteName
+    siteName,
+    loading
 }) {
-
     const {
         filterMenuItemsAllowed,
         cardOptionsItemsAllowed,
@@ -217,6 +217,7 @@ function Search({
                             totalResources={totalResources}
                             totalFilters={queryFilters.length}
                             filtersActive={!!(queryFilters.length > 0)}
+                            loading={loading}
                         />
                     </ConnectedCardGrid>
                 </div>
@@ -258,15 +259,17 @@ const ConnectedSearch = connect(
         state => state?.controls?.gnFiltersPanel?.enabled || null,
         getParsedGeoNodeConfiguration,
         getTotalResources,
-        state => state?.gnsettings?.siteName || "Geonode"
-    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName) => ({
+        state => state?.gnsettings?.siteName || "Geonode",
+        state => state?.gnsearch.loading || false
+    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName, loading) => ({
         params,
         user,
         resource,
         isFiltersPanelEnabled,
         config,
         totalResources,
-        siteName
+        siteName,
+        loading
     })),
     {
         onSearch: searchResources,