[UIPQB-131] Update logic of showing spinner (#144)

* Update logic of showing spinner * Update CHANGELOG.md * Update build-npm.yml * Update build-npm.yml
folio-org · Sep 12, 2024 · d58626a · d58626a
1 parent 2200907
commit d58626a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/.github/workflows/build-npm.yml b/.github/workflows/build-npm.yml
@@ -93,15 +93,15 @@ jobs:
           comment_title: Jest Unit Test Statistics
 
       - name: Publish Jest coverage report
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: jest-coverage-report
           path: ${{ env.JEST_COVERAGE_REPORT_DIR }}
           retention-days: 30
 
       - name: Publish yarn.lock
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: yarn.lock

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * [UIPQB-112](https://folio-org.atlassian.net/browse/UIPQB-112) Query builder: Accessibility: Not equal operator value is not read by screenreader
 * [UIPQB-119](https://folio-org.atlassian.net/browse/UIPQB-119) Filter column names
 * [UIPQB-79](https://folio-org.atlassian.net/browse/UIPQB-79) Update available operators for arrays
+* [UIPQB-131](https://folio-org.atlassian.net/browse/UIPQB-131) Columns and empty area display in the list details page, when we refresh the page 1st time or duplicate the list
 
 ## [1.1.4](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.1.4) (2024-04-02)
 

diff --git a/src/QueryBuilder/ResultViewer/ResultViewer.js b/src/QueryBuilder/ResultViewer/ResultViewer.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Col, Row, Accordion, MultiColumnList, Headline, Layout, Icon } from '@folio/stripes/components';
 import { PrevNextPagination } from '@folio/stripes-acq-components';
 import { useIntl } from 'react-intl';
+import { isEmpty } from 'lodash';
 import { QueryLoader } from './QueryLoader';
 import { useAsyncDataSource } from '../../hooks/useAsyncDataSource';
 import { usePagination } from '../../hooks/usePagination';
@@ -116,31 +117,36 @@ export const ResultViewer = ({
     );
   };
 
-  const emptyResultMessage = isListLoading ?
-    <Icon
-      icon="spinner-ellipsis"
-      size="large"
-    />
-    :
-    intl.formatMessage({ id: 'ui-plugin-query-builder.result.emptyMessage' });
+  const emptyResultMessage = intl.formatMessage(
+    { id: 'ui-plugin-query-builder.result.emptyMessage' },
+  );
 
   const renderTable = () => {
+    const showSpinner = isListLoading && isEmpty(contentData);
+
     return (
       <Row center="xs">
         <Col xs={12}>
-          <MultiColumnList
-            data-testid="results-viewer-table"
-            contentData={contentData}
-            columnMapping={columnMapping}
-            formatter={formatter}
-            columnWidths={columnWidths}
-            visibleColumns={visibleColumns}
-            pagingType={null}
-            onNeedMoreData={changePage}
-            height={height}
-            loading={isListLoading}
-            isEmptyMessage={emptyResultMessage}
-          />
+          {showSpinner ? (
+            <Icon
+              icon="spinner-ellipsis"
+              size="large"
+            />
+          ) : (
+            <MultiColumnList
+              data-testid="results-viewer-table"
+              contentData={contentData}
+              columnMapping={columnMapping}
+              formatter={formatter}
+              columnWidths={columnWidths}
+              visibleColumns={visibleColumns}
+              pagingType={null}
+              onNeedMoreData={changePage}
+              height={height}
+              loading={isListLoading}
+              isEmptyMessage={emptyResultMessage}
+            />
+          )}
           {showPagination && (
             <PrevNextPagination
               limit={limit}
@@ -165,7 +171,7 @@ export const ResultViewer = ({
       <>
         {renderHeader()}
         {renderAdditionalControls()}
-        {!!Object.keys(columnMapping).length && renderTable()}
+        {!isEmpty(columnMapping) && renderTable()}
       </>
     );
   };