fix: correctly center the table spinner

dhis2 · Sep 7, 2023 · 2ee0ec5 · 2ee0ec5
1 parent 05d3d79
commit 2ee0ec5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/cypress/helpers/table.js b/cypress/helpers/table.js
@@ -20,7 +20,7 @@ export const expectTableToBeVisible = () =>
     getLineListTable().find('tbody').should('be.visible')
 
 export const expectTableToBeUpdated = () =>
-    cy.getBySel('line-list-loading-indicator').should(($div) => {
+    cy.getBySel('line-list-fetch-container').should(($div) => {
         const className = $div[0].className
 
         expect(className).to.not.match(/Visualization_fetching*/)

diff --git a/src/components/Visualization/Visualization.js b/src/components/Visualization/Visualization.js
@@ -179,6 +179,30 @@ export const Visualization = ({
         sortDirection,
     })
 
+    const fetchContainerRef = useRef(null)
+    const dataTableHeadRef = useRef(null)
+    const dataTableFootRef = useRef(null)
+    const fetchIndicatorTop = useMemo(() => {
+        if (
+            !fetching ||
+            !fetchContainerRef?.current ||
+            !dataTableHeadRef?.current ||
+            !dataTableFootRef?.current
+        ) {
+            return 'calc(50% - 12px)'
+        }
+
+        const containerHeight = fetchContainerRef.current.clientHeight
+        const headHeight = dataTableHeadRef.current.offsetHeight
+        const footHeight = dataTableFootRef.current.offsetHeight
+        // tbody height excluding the parts hidden by scrolling
+        const visibleBodyHeight = containerHeight - headHeight - footHeight
+        // 12 px is half the loader height
+        const top = Math.round(headHeight + visibleBodyHeight / 2 - 12)
+
+        return `${top}px`
+    }, [fetching])
+
     // Reset page for new visualizations
     useEffect(() => {
         visualizationRef.current = visualization
@@ -305,19 +329,24 @@ export const Visualization = ({
     return (
         <div className={styles.pluginContainer} ref={containerCallbackRef}>
             <div
-                data-test="line-list-loading-indicator"
-                className={cx(styles.fetchIndicator, {
+                data-test="line-list-fetch-container"
+                className={cx(styles.fetchContainer, {
                     [styles.fetching]: fetching,
                 })}
+                ref={fetchContainerRef}
             >
+                <div
+                    className={styles.fetchIndicator}
+                    style={{ top: fetchIndicatorTop }}
+                />
                 <DataTable
                     scrollHeight={isInModal ? 'calc(100vh - 285px)' : '100%'}
                     scrollWidth={'100%'}
                     width="auto"
                     className={styles.dataTable}
                     dataTest="line-list-table"
                 >
-                    <DataTableHead>
+                    <DataTableHead ref={dataTableHeadRef}>
                         <DataTableRow>
                             {data.headers.map((header, index) =>
                                 header ? (
@@ -423,7 +452,10 @@ export const Visualization = ({
                             </DataTableRow>
                         ))}
                     </DataTableBody>
-                    <DataTableFoot className={styles.stickyFooter}>
+                    <DataTableFoot
+                        className={styles.stickyFooter}
+                        ref={dataTableFootRef}
+                    >
                         <DataTableRow>
                             <DataTableCell
                                 colSpan={colSpan}

diff --git a/src/components/Visualization/styles/Visualization.module.css b/src/components/Visualization/styles/Visualization.module.css
@@ -11,21 +11,23 @@
     min-width: 0;
 }
 
-.fetchIndicator {
+.fetchContainer {
+    display: flex;
+    align-self: flex-start;
     position: relative;
+    height: auto;
     min-width: 0;
     max-height: 100%;
-    display: flex;
+    background-color: red;
 }
 
-.fetchIndicator.fetching::after {
+.fetchContainer.fetching > .fetchIndicator {
     content: '';
     position: absolute;
-    top: calc(50% - 24px);
-    left: calc(50% - 24px);
-    width: 48px;
-    height: 48px;
-    border-width: 6px;
+    left: calc(50% - 12px);
+    width: 24px;
+    height: 24px;
+    border-width: 3px;
     border-style: solid;
     border-color: rgba(110, 122, 138, 0.15) rgba(110, 122, 138, 0.15)
         rgb(20, 124, 215);
@@ -35,16 +37,17 @@
     animation-iteration-count: infinite;
     animation-name: rotation;
     animation-timing-function: linear;
+    z-index: 1;
 }
 
-.fetchIndicator.fetching tbody::before {
+.fetchContainer.fetching tbody::before {
     content: '';
     position: absolute;
     inset: 0px;
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-.fetchIndicator :global(.tablescrollbox) {
+.fetchContainer :global(.tablescrollbox) {
     transition: max-width 200ms ease-out;
 }