From 4ba5fcc723c89d6d2304d0261c0052e86c1d933a Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 9 Mar 2021 07:34:39 +0100
Subject: [PATCH] put loading spinner inside table as proposed by PF (#418)

---
 .../table-toolbar/KeycloakDataTable.tsx       | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index c142002051..d50d0106b5 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -242,7 +242,6 @@ export function KeycloakDataTable<T>({
 
   return (
     <>
-      {!rows && <Loading />}
       {rows && (rows.length > 0 || !emptyState) && isPaginated && (
         <PaginatingTableToolbar
           count={rows.length}
@@ -263,15 +262,17 @@ export function KeycloakDataTable<T>({
           searchTypeComponent={searchTypeComponent}
           toolbarItem={toolbarItem}
         >
-          <DataTable
-            canSelectAll={canSelectAll}
-            onSelect={onSelect ? _onSelect : undefined}
-            actions={convertAction()}
-            actionResolver={actionResolver}
-            rows={rows}
-            columns={columns}
-            ariaLabelKey={ariaLabelKey}
-          />
+          {!loading && (
+            <DataTable
+              canSelectAll={canSelectAll}
+              onSelect={onSelect ? _onSelect : undefined}
+              actions={convertAction()}
+              actionResolver={actionResolver}
+              rows={rows}
+              columns={columns}
+              ariaLabelKey={ariaLabelKey}
+            />
+          )}
           {loading && <Loading />}
         </PaginatingTableToolbar>
       )}
@@ -286,15 +287,18 @@ export function KeycloakDataTable<T>({
           toolbarItem={toolbarItem}
           searchTypeComponent={searchTypeComponent}
         >
-          <DataTable
-            canSelectAll={canSelectAll}
-            onSelect={onSelect ? _onSelect : undefined}
-            actions={convertAction()}
-            actionResolver={actionResolver}
-            rows={filteredData || rows}
-            columns={columns}
-            ariaLabelKey={ariaLabelKey}
-          />
+          {!loading && (
+            <DataTable
+              canSelectAll={canSelectAll}
+              onSelect={onSelect ? _onSelect : undefined}
+              actions={convertAction()}
+              actionResolver={actionResolver}
+              rows={filteredData || rows}
+              columns={columns}
+              ariaLabelKey={ariaLabelKey}
+            />
+          )}
+          {loading && <Loading />}
         </TableToolbar>
       )}
       <>{!loading && rows?.length === 0 && emptyState}</>