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 index 581706e709..b7b1050dfb 100644 --- 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 index 3ea9d56a24..9d9a48cc9d 100644 --- 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 (
+ {renderLoadingSpinner()} + {subitems.map(({ location }) => ( ))} @@ -119,18 +121,27 @@ const FinderBranch = ({ locationData, itemsPerPage }) => { ); }; - - useEffect(() => { - if (isLoading || !loadedLocations.subitems) { + const renderLoadingSpinner = () => { + if (!isLoading) { return; } - const data = { ...locationData, ...loadedLocations, subitems: [...locationData.subitems, ...loadedLocations.subitems] }; + return ( +
+ +
+ ); + } + + 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; }