EZP-31968: Added spinner to UDW (#1642)

ezsystems · Oct 29, 2020 · db1a5b6 · db1a5b6
1 parent 0eceb7f
commit db1a5b6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.branch.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.branch.scss
@@ -62,4 +62,11 @@
         top: 0;
         right: 0;
     }
+
+    &__loading-spinner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: calculateRem(50px);
+    }
 }
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.branch.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.branch.js
@@ -111,6 +111,8 @@ const FinderBranch = ({ locationData, itemsPerPage }) => {
         return (
             <Fragment>
                 <div className="c-finder-branch__items-wrapper" onScroll={loadMore} style={{ width }}>
+                    {renderLoadingSpinner()}
+
                     {subitems.map(({ location }) => (
                         <FinderLeaf key={location.id} location={location} />
                     ))}
@@ -119,18 +121,27 @@ const FinderBranch = ({ locationData, itemsPerPage }) => {
             </Fragment>
         );
     };
-
-    useEffect(() => {
-        if (isLoading || !loadedLocations.subitems) {
+    const renderLoadingSpinner = () => {
+        if (!isLoading) {
             return;
         }
 
-        const data = { ...locationData, ...loadedLocations, subitems: [...locationData.subitems, ...loadedLocations.subitems] };
+        return (
+            <div className="c-finder-branch__loading-spinner">
+                <Icon name="spinner" extraClasses="ez-icon--medium ez-spin" />
+            </div>
+        );
+    }
+
+    useEffect(() => {
+        if (loadedLocations.subitems) {
+            const data = { ...locationData, ...loadedLocations, subitems: [...locationData.subitems, ...loadedLocations.subitems] };
 
-        dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data });
+            dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data });
+        }
     }, [loadedLocations, dispatchLoadedLocationsAction, isLoading]);
 
-    if (!subitems.length && !collapsed) {
+    if (!subitems.length && !collapsed && !isLoading) {
         return null;
     }