fix a bug related to page limit + fix position of recordset spinner (#…

…2384)

- if users picked the already selected page limit, the page would
  get stuck. I'm now triggering the update properly.
- the recordset spinner was displayed in the middle of the page
  while it was only showing whether the main table data has been
  loaded or not. The spinner is now displayed inside the table similar
  to how the record page's main section spinner works.

src/assets/scss/_record-main-section.scss

@@ -8,16 +8,9 @@
 
     position: relative;
 
+    // when spinner is displayed, we have to adjust the margin-top
     &.with-spinner {
-      margin-top: map-get(variables.$record-spacing-map, 'main-spinner-height') * -1;
-    }
-    .record-main-spinner-container {
-      position: sticky;
-      position: -webkit-sticky;
-      top: min(50px, 50%);
-      .record-main-spinner {
-        height: map-get(variables.$record-spacing-map, 'main-spinner-height');
-      }
+      margin-top: variables.$main-spinner-height * -1;
     }
 
     > table {

src/assets/scss/_recordset.scss

@@ -2,7 +2,6 @@
 @use 'variables';
 
 .chaise-body {
-
   .recordset-container {
     // override the minimum width of side-panel (written the same way as app.scss
     // this is done to fit the more-filters message
@@ -11,7 +10,6 @@
       min-width: 270px;
     }
 
-
     .top-panel-container {
       .top-flex-panel .top-left-panel div.panel-header {
         bottom: 10px;
@@ -84,13 +82,13 @@
               white-space: nowrap;
 
               // only add the colon if the title exists
-              &~.chaise-btn.filter-chiclet-value {
+              & ~ .chaise-btn.filter-chiclet-value {
                 border-left: 0;
 
                 position: relative;
 
                 &:before {
-                  content: ":";
+                  content: ':';
                   position: absolute;
                   left: 0;
                 }
@@ -181,5 +179,13 @@
         }
       }
     }
+
+    // when spinner is displayed, we have to adjust the margin-top
+    .recordset-main-table.with-spinner {
+      margin-top: variables.$main-spinner-height * -1;
+    }
+    .recordset-main-spinner-container {
+      top: 70px;
+    }
   }
 }

src/assets/scss/_variables.scss

@@ -4,6 +4,7 @@ $left-panel-width-sm: 15vw;
 $left-panel-min-width: 170px;
 $viewport-margin: 20px;
 $main-alley:30px;
+$main-spinner-height: 97px;
 
 
 // button props

src/assets/scss/app.scss

@@ -326,6 +326,21 @@ html {
     }
   }
 
+  /**
+   * show a sticky spinner for the container
+   * used in recordset and record pages
+   * NOTE: the container must have a margin-top: variables.$main-spinner-height * -1; when spinner is displayed.
+   */
+  .sticky-spinner-outer-container {
+    position: sticky;
+    position: -webkit-sticky;
+    top: min(50px, 50%);
+    z-index: map-get(variables.$z-index-map, 'spinner');
+    .spinner-container {
+      height: variables.$main-spinner-height;
+    }
+  }
+
 
   .forced-hidden {
     display: none !important;

src/assets/scss/maps/_record-page-spacing.scss

@@ -1,5 +1,4 @@
 $record-spacing-map: (
-  'main-spinner-height': 97px,
   'record-table-cell-padding': 5px,
   'record-table-cell-border-width': 1px,
   'space-between-related-sections': 5px,

src/components/record/record-main-section.tsx

@@ -142,10 +142,11 @@ const RecordMainSection = (): JSX.Element => {
     });
   };
 
+  const hasSpinner = errors.length === 0 && showMainSectionSpinner;
   return (
-    <div className={`record-main-section ${errors.length === 0 && showMainSectionSpinner ? ' with-spinner' : ''}`}>
-      {errors.length === 0 && showMainSectionSpinner &&
-        <div className='record-main-spinner-container'>
+    <div className={`record-main-section ${hasSpinner ? ' with-spinner' : ''}`}>
+      {hasSpinner &&
+        <div className='sticky-spinner-outer-container'>
           <ChaiseSpinner className='record-main-spinner manual-position-spinner' />
         </div>
       }

src/components/recordset/recordset.tsx

@@ -18,7 +18,7 @@ import Title from '@isrd-isi-edu/chaise/src/components/title';
 import TableHeader from '@isrd-isi-edu/chaise/src/components/recordset/table-header';
 
 // hooks
-import React, { AnchorHTMLAttributes, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useError from '@isrd-isi-edu/chaise/src/hooks/error';
 import useRecordset from '@isrd-isi-edu/chaise/src/hooks/recordset';
 
@@ -783,17 +783,25 @@ const RecordsetInner = ({
     </div>
   );
 
-  const renderMainContainer = () => (
-    <div className='main-container dynamic-padding' ref={mainContainer}>
+  const renderMainContainer = () => {
+    const hasSpinner = errors.length === 0 && (isLoading || forceShowSpinner);
+    return <div className='main-container dynamic-padding' ref={mainContainer}>
       <div className='main-body'>
-        <RecordsetTable
-          config={config}
-          initialSortObject={initialReference.location.sortObject}
-        />
+        {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' : ''}`}>
+          <RecordsetTable
+            config={config}
+            initialSortObject={initialReference.location.sortObject}
+          />
+        </div>
       </div>
       {config.displayMode === RecordsetDisplayMode.FULLSCREEN && <Footer />}
     </div>
-  );
+  };
 
   /**
    * The left panels that should be resized together
@@ -807,10 +815,6 @@ const RecordsetInner = ({
 
   return (
     <div className='recordset-container app-content-container'>
-      {
-        errors.length === 0 && (isLoading || forceShowSpinner) &&
-        <ChaiseSpinner className='recordest-main-spinner' />
-      }
       <div className='top-panel-container'>
         {/* recordset level alerts */}
         <Alerts />

src/providers/recordset.tsx

@@ -552,6 +552,11 @@ export default function RecordsetProvider({
       // after react sets the reference, the useEffect will trigger processRequests
       setReference(newRef);
     } else if (limit && typeof limit === 'number') {
+      if (limit === pageLimitRef.current) {
+        // if the limit has not changed, manually call the processRequests because the useEffect will not be called
+        // (this can happen if users clicked on the currently applied pageLimit in the dropdown)
+        processRequests();
+      }
       setPageLimit(limit);
     } else {
       processRequests();