Merge pull request #6931 from TheThingsNetwork/fix/table-overlay

Fix table fetching overlay
TheThingsNetwork · Feb 13, 2024 · 974f761 · 974f761
2 parents 012d0d9 + 1248e5b
commit 974f761
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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
@@ -23,3 +23,6 @@
   &-cell
     padding-top: 0
     padding-bottom: 0
+
+.overlay
+  min-height: 10rem