From 1248e5b3e4f2752ada19fc2a77f69b90a8a087aa Mon Sep 17 00:00:00 2001
From: Kevin Schiffer <kevin.schiffer@thethingsindustries.com>
Date: Tue, 13 Feb 2024 16:15:30 +0900
Subject: [PATCH] console,account: Fix table fetching overlay

---
 pkg/webui/components/table/index.js       |  8 +++++---
 pkg/webui/components/table/table/index.js | 19 +++++++++++++++----
 pkg/webui/components/table/tabular.styl   |  3 +++
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/pkg/webui/components/table/index.js b/pkg/webui/components/table/index.js
index 6db194305f..25fb719aa6 100644
--- a/pkg/webui/components/table/index.js
+++ b/pkg/webui/components/table/index.js
@@ -162,14 +162,16 @@ const Tabular = ({
 
   return (
     <div className={classnames(style.container, className)}>
-      <Overlay visible={loading} loading={loading}>
+      <Overlay visible={loading} loading={loading} className={style.overlay}>
         <Table minWidth={minWidth}>
           <Table.Head>{columns}</Table.Head>
-          <Table.Body empty={rows.length === 0} emptyMessage={emptyMessage}>
+          <Table.Body loading={loading} empty={rows.length === 0} emptyMessage={emptyMessage}>
             {rows}
           </Table.Body>
         </Table>
-        <Table.Footer>{pagination}</Table.Footer>
+        <Table.Footer loading={loading} empty={rows.length === 0}>
+          {pagination}
+        </Table.Footer>
       </Overlay>
     </div>
   )
diff --git a/pkg/webui/components/table/table/index.js b/pkg/webui/components/table/table/index.js
index 0d0a9ccce1..024338f473 100644
--- a/pkg/webui/components/table/table/index.js
+++ b/pkg/webui/components/table/table/index.js
@@ -50,7 +50,11 @@ Head.defaultProps = {
   className: undefined,
 }
 
-const Body = ({ className, empty, emptyMessage, ...props }) => {
+const Body = ({ className, empty, loading, emptyMessage, ...props }) => {
+  if (empty && loading) {
+    return null
+  }
+
   if (empty) {
     return <Empty message={emptyMessage} />
   }
@@ -62,24 +66,31 @@ Body.propTypes = {
   className: PropTypes.string,
   empty: PropTypes.bool,
   emptyMessage: PropTypes.message,
+  loading: PropTypes.bool,
 }
 
 Body.defaultProps = {
   className: undefined,
   empty: false,
   emptyMessage: undefined,
+  loading: false,
 }
 
-const Footer = ({ className, ...props }) => (
-  <div {...props} className={classnames(className, style.sectionFooter)} />
-)
+const Footer = ({ className, loading, empty, ...props }) =>
+  empty && loading ? null : (
+    <div {...props} className={classnames(className, style.sectionFooter)} />
+  )
 
 Footer.propTypes = {
   className: PropTypes.string,
+  empty: PropTypes.bool,
+  loading: PropTypes.bool,
 }
 
 Footer.defaultProps = {
   className: undefined,
+  empty: false,
+  loading: false,
 }
 
 const Table = ({ className, children, minWidth, ...rest }) => {
diff --git a/pkg/webui/components/table/tabular.styl b/pkg/webui/components/table/tabular.styl
index cf68bca337..8f37fbd7dc 100644
--- a/pkg/webui/components/table/tabular.styl
+++ b/pkg/webui/components/table/tabular.styl
@@ -23,3 +23,6 @@
   &-cell
     padding-top: 0
     padding-bottom: 0
+
+.overlay
+  min-height: 10rem