feat(admin-ui): loading in the client list page

GluuFederation · Aug 4, 2022 · 82c47e1 · 82c47e1
1 parent b6a185b
commit 82c47e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js
@@ -53,6 +53,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const bgThemeColor = { background: themeColors.background }
   const [scopeClients, setScopeClients] = useState()
   const [haveScopeINUMParam] = useState(search.indexOf('?scopeInum=') > -1)
+  const [isPageLoading, setIsPageLoading] = useState(loading)
 
   SetTitle(t('titles.oidc_clients'))
 
@@ -141,12 +142,17 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
         setScopeClients(clientsScope)
       }
     } else {
+      setIsPageLoading(true)
       makeOptions()
       buildPayload(userAction, FETCHING_OIDC_CLIENTS, options)
       dispatch(getOpenidClients(userAction))
 
       buildPayload(userAction, '', options)
       dispatch(getScopes(userAction))
+
+      setTimeout(() => {
+        setIsPageLoading(false)
+      }, 3000);
     }
   }, [haveScopeINUMParam])
 
@@ -284,7 +290,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
             }}
             columns={tableColumns}
             data={haveScopeINUMParam ? scopeClients : clients}
-            isLoading={loading}
+            isLoading={isPageLoading}
             title=""
             actions={myActions}
             options={{

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientShowScopes.js b/admin-ui/plugins/auth-server/components/Clients/ClientShowScopes.js
@@ -27,7 +27,7 @@ function ClientShowScopes({ handler, data, isOpen }) {
             </div>
           )
         }) : (
-          <div>{t('message.no_scope_in_client')}</div>
+          <div>{t('messages.no_scope_in_client')}</div>
         )}
       </ModalBody>
       <ModalFooter>