change the position of recordset main spinner

to be always vertically centered
informatics-isi-edu · Jan 5, 2024 · bd95c98 · bd95c98
1 parent ff2c9e7
commit bd95c98
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/assets/scss/_recordset.scss b/src/assets/scss/_recordset.scss
@@ -181,11 +181,12 @@
     }
 
     // when spinner is displayed, we have to adjust the margin-top
-    .recordset-main-table.with-spinner {
+    .main-body.with-spinner {
       margin-top: variables.$main-spinner-height * -1;
     }
     .recordset-main-spinner-container {
-      top: 70px;
+      // show the tooltip in the middle of the container
+      top: calc(50% - variables.$main-spinner-height);
     }
   }
 }
diff --git a/src/components/recordset/recordset.tsx b/src/components/recordset/recordset.tsx
@@ -785,22 +785,22 @@ const RecordsetInner = ({
 
   const renderMainContainer = () => {
     const hasSpinner = errors.length === 0 && (isLoading || forceShowSpinner);
-    return <div className='main-container dynamic-padding' ref={mainContainer}>
-      <div className='main-body'>
+    return (
+      <div className='main-container dynamic-padding' ref={mainContainer}>
         {hasSpinner &&
           <div className='recordset-main-spinner-container sticky-spinner-outer-container'>
             <ChaiseSpinner className='recordest-main-spinner manual-position-spinner' />
           </div>
         }
-        <div className={`recordset-main-table${hasSpinner ? ' with-spinner' : ''}`}>
+        <div className={`main-body${hasSpinner ? ' with-spinner' : ''}`}>
           <RecordsetTable
             config={config}
             initialSortObject={initialReference.location.sortObject}
           />
         </div>
+        {config.displayMode === RecordsetDisplayMode.FULLSCREEN && <Footer />}
       </div>
-      {config.displayMode === RecordsetDisplayMode.FULLSCREEN && <Footer />}
-    </div>
+    )
   };
 
   /**