feat: add loading overlay to DataView

Author: jeffredodd

src/components/Common/DataView/DataView.module.scss

@@ -1,3 +1,13 @@
 .dataViewContainer {
   width: 100%;
 }
+
+.contentWrapper {
+  position: relative;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.contentWrapper[data-fetching='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}

src/components/Common/DataView/DataView.tsx

@@ -55,9 +55,11 @@ export const DataView = <T,>({
         containerRef.current = ref
       }}
     >
-      {isBreakpointsDetected && (
-        <Component {...dataViewProps} footer={footer} variant={variant} emptyState={emptyState} />
-      )}
+      <div className={styles.contentWrapper} data-fetching={isFetching || undefined}>
+        {isBreakpointsDetected && (
+          <Component {...dataViewProps} footer={footer} variant={variant} emptyState={emptyState} />
+        )}
+      </div>
       {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}
     </div>
   )