From ff2c9e79ef6e0a31fbf3a81a341237cdc6263e24 Mon Sep 17 00:00:00 2001 From: Aref Shafaei Date: Wed, 3 Jan 2024 13:51:14 -0800 Subject: [PATCH] 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 | 11 ++------ src/assets/scss/_recordset.scss | 14 +++++++--- src/assets/scss/_variables.scss | 1 + src/assets/scss/app.scss | 15 ++++++++++ .../scss/maps/_record-page-spacing.scss | 1 - src/components/record/record-main-section.tsx | 7 +++-- src/components/recordset/recordset.tsx | 28 +++++++++++-------- src/providers/recordset.tsx | 5 ++++ 8 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/assets/scss/_record-main-section.scss b/src/assets/scss/_record-main-section.scss index 07acf4423..24a06a086 100644 --- a/src/assets/scss/_record-main-section.scss +++ b/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 { diff --git a/src/assets/scss/_recordset.scss b/src/assets/scss/_recordset.scss index 5f34f5231..ab49709d3 100644 --- a/src/assets/scss/_recordset.scss +++ b/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; + } } } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 709149e27..164591761 100644 --- a/src/assets/scss/_variables.scss +++ b/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 diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 80a9a5b31..89b578f8e 100644 --- a/src/assets/scss/app.scss +++ b/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; diff --git a/src/assets/scss/maps/_record-page-spacing.scss b/src/assets/scss/maps/_record-page-spacing.scss index ec6361273..b0f71d3f1 100644 --- a/src/assets/scss/maps/_record-page-spacing.scss +++ b/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, diff --git a/src/components/record/record-main-section.tsx b/src/components/record/record-main-section.tsx index 2b13d8f94..b25dee80e 100644 --- a/src/components/record/record-main-section.tsx +++ b/src/components/record/record-main-section.tsx @@ -142,10 +142,11 @@ const RecordMainSection = (): JSX.Element => { }); }; + const hasSpinner = errors.length === 0 && showMainSectionSpinner; return ( -
- {errors.length === 0 && showMainSectionSpinner && -
+
+ {hasSpinner && +
} diff --git a/src/components/recordset/recordset.tsx b/src/components/recordset/recordset.tsx index fc6778ad5..caa5cdeea 100644 --- a/src/components/recordset/recordset.tsx +++ b/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 = ({
); - const renderMainContainer = () => ( -
+ const renderMainContainer = () => { + const hasSpinner = errors.length === 0 && (isLoading || forceShowSpinner); + return
- + {hasSpinner && +
+ +
+ } +
+ +
{config.displayMode === RecordsetDisplayMode.FULLSCREEN &&
}
- ); + }; /** * The left panels that should be resized together @@ -807,10 +815,6 @@ const RecordsetInner = ({ return (
- { - errors.length === 0 && (isLoading || forceShowSpinner) && - - }
{/* recordset level alerts */} diff --git a/src/providers/recordset.tsx b/src/providers/recordset.tsx index 601dd05f0..8a1b92a3e 100644 --- a/src/providers/recordset.tsx +++ b/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();