Add loader to Rules table (opensearch-project#159)

Signed-off-by: Sinisa Andric <[email protected]> Signed-off-by: Sinisa Andric <[email protected]>
riysaxen-amzn · Nov 23, 2022 · 26f8ba0 · 26f8ba0
1 parent caad327
commit 26f8ba0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/public/pages/Rules/components/RulesTable/RulesTable.tsx b/public/pages/Rules/components/RulesTable/RulesTable.tsx
@@ -13,15 +13,17 @@ import { CriteriaWithPagination, EuiInMemoryTable, EuiPanel } from '@elastic/eui
 
 export interface RulesTableProps {
   ruleItems: RuleTableItem[];
+  loading: boolean;
   showRuleDetails: (ruleItem: RuleTableItem) => void;
 }
 
-export const RulesTable: React.FC<RulesTableProps> = ({ ruleItems, showRuleDetails }) => {
+export const RulesTable: React.FC<RulesTableProps> = ({ ruleItems, loading, showRuleDetails }) => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
 
   return (
     <EuiPanel>
       <EuiInMemoryTable
+        loading={loading}
         items={ruleItems}
         columns={getRulesTableColumns(showRuleDetails)}
         search={getRulesTableSearchConfig()}

diff --git a/public/pages/Rules/containers/Rules/Rules.tsx b/public/pages/Rules/containers/Rules/Rules.tsx
@@ -27,6 +27,7 @@ export const Rules: React.FC<RulesProps> = (props) => {
   const rulesViewModelActor = useMemo(() => new RulesViewModelActor(services), [services]);
   const [allRules, setAllRules] = useState<RuleItemInfoBase[]>([]);
   const [flyoutData, setFlyoutData] = useState<RuleTableItem | undefined>(undefined);
+  const [loading, setLoading] = useState<boolean>(false);
   const ruleItems: RuleTableItem[] = useMemo(
     () =>
       allRules.map((rule) => ({
@@ -42,8 +43,10 @@ export const Rules: React.FC<RulesProps> = (props) => {
   );
 
   const getRules = useCallback(async () => {
+    setLoading(true);
     const allRules = await rulesViewModelActor.fetchRules();
     setAllRules(allRules);
+    setLoading(false);
   }, [rulesViewModelActor]);
 
   useEffect(() => {
@@ -113,7 +116,7 @@ export const Rules: React.FC<RulesProps> = (props) => {
           <EuiSpacer size={'m'} />
         </EuiFlexItem>
         <EuiFlexItem>
-          <RulesTable ruleItems={ruleItems} showRuleDetails={setFlyoutData} />
+          <RulesTable loading={loading} ruleItems={ruleItems} showRuleDetails={setFlyoutData} />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>