Bug Fix: Loading veil (#2538)

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -265,12 +265,12 @@ const DataTable = ({
 
   return (
     <div className={baseClass}>
+      {isLoading && (
+        <div className={"loading-overlay"}>
+          <Spinner />
+        </div>
+      )}
       <div className={"data-table data-table__wrapper"}>
-        {isLoading && (
-          <div className={"loading-overlay"}>
-            <Spinner />
-          </div>
-        )}
         <table className={"data-table__table"}>
           {Object.keys(selectedRowIds).length !== 0 && (
             <thead className={"active-selection"}>

frontend/components/TableContainer/DataTable/_styles.scss

@@ -1,5 +1,7 @@
 .data-table-container {
   position: relative;
+  display: inline-block;
+  width: 100%;
 
   .data-table {
     &__wrapper {
@@ -8,6 +10,8 @@
       border-radius: 6px;
       margin-top: $pad-small;
       box-shadow: inset -8px 0 17px -10px #e8edf4;
+      flex-grow: 1;
+      width: 100%;
     }
 
     &__table {
@@ -198,15 +202,16 @@
         text-transform: uppercase;
       }
     }
-
-    .loading-overlay {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: rgba(255, 255, 255, 0.8);
-      z-index: 1;
-    }
+  }
+  .loading-overlay {
+    display: flex;
+    flex-grow: 1;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 1;
   }
 }