fix(RHINENG-11976): fix loading states across app

RedHatInsights · Nov 12, 2024 · a58a349 · a58a349
1 parent b2cdd1c
commit a58a349
Show file tree

Hide file tree

Showing 10 changed files with 4,173 additions and 6,871 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "@babel/runtime": "^7.24.6",
     "@patternfly/patternfly": "^5.3.1",
     "@patternfly/react-charts": "^7.4.0",
+    "@patternfly/react-component-groups": "^5.5.3",
     "@patternfly/react-core": "^5.3.3",
     "@patternfly/react-icons": "^5.3.2",
     "@patternfly/react-table": "^5.3.3",

diff --git a/src/PresentationalComponents/Inventory/InventoryDetails.js b/src/PresentationalComponents/Inventory/InventoryDetails.js
@@ -19,6 +19,20 @@ import { useIntl } from 'react-intl';
 import SystemAdvisor from '../../SmartComponents/SystemAdvisor';
 import { useParams } from 'react-router-dom';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import { Skeleton } from '@patternfly/react-core';
+
+const InventoryHeadFallback = () => {
+  return (
+    <>
+      <Skeleton width="70%" fontSize="xl" />
+      <br />
+      <Skeleton width="40%" fontSize="md" />
+      <br />
+      <Skeleton width="55%" fontSize="md" />
+      <br />
+    </>
+  );
+};
 
 const InventoryDetails = ({ entity }) => {
   const intl = useIntl();
@@ -46,7 +60,7 @@ const InventoryDetails = ({ entity }) => {
     >
       <PageHeader className="pf-m-light ins-inventory-detail">
         {entity && <Breadcrumbs current={entity.display_name || entity.id} />}
-        <InventoryDetailHead hideBack fallback="" />
+        <InventoryDetailHead hideBack fallback={<InventoryHeadFallback />} />
       </PageHeader>
       <section className="pf-v5-l-page__main-section pf-v5-c-page__main-section">
         <Title className="pf-v5-u-mb-lg" headingLevel="h3" size="2xl">

diff --git a/src/PresentationalComponents/PathwaysTable/PathwaysTable.js b/src/PresentationalComponents/PathwaysTable/PathwaysTable.js
@@ -34,7 +34,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 
 import CategoryLabel from '../Labels/CategoryLabel';
-import Loading from '../Loading/Loading';
 import MessageState from '../MessageState/MessageState';
 import { PrimaryToolbar } from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
 import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorState';
@@ -48,6 +47,7 @@ import { useGetPathwaysQuery } from '../../Services/Pathways';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
+import { SkeletonTable } from '@patternfly/react-component-groups';
 
 const PathwaysTable = ({ isTabActive }) => {
   const intl = useIntl();
@@ -388,7 +388,7 @@ const PathwaysTable = ({ isTabActive }) => {
         activeFiltersConfig={activeFiltersConfig}
       />
       {isFetching ? (
-        <Loading />
+        <SkeletonTable columns={cols.map((c) => c.title)} />
       ) : isError ? (
         <Table>
           <ErrorState />

diff --git a/src/PresentationalComponents/RulesTable/RulesTable.js b/src/PresentationalComponents/RulesTable/RulesTable.js
@@ -24,7 +24,6 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import DisableRule from '../Modals/DisableRule';
 import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorState';
-import Loading from '../../PresentationalComponents/Loading/Loading';
 import { PrimaryToolbar } from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
 import ViewHostAcks from '../../PresentationalComponents/Modals/ViewHostAcks';
 import debounce from '../../Utilities/Debounce';
@@ -50,6 +49,7 @@ import {
 import { useActionsResolver } from './useActionsResolver';
 import impactingFilter from '../Filters/impactingFilter';
 import { AccountStatContext } from '../../ZeroStateWrapper';
+import { SkeletonTable } from '@patternfly/react-component-groups';
 
 const RulesTable = ({ isTabActive, pathway }) => {
   const intl = useIntl();
@@ -286,7 +286,7 @@ const RulesTable = ({ isTabActive, pathway }) => {
         activeFiltersConfig={activeFiltersConfig}
       />
       {isFetching ? (
-        <Loading />
+        <SkeletonTable columns={cols.map((c) => c.title)} isExpandable />
       ) : isError ? (
         <Table>
           <ErrorState />

diff --git a/src/PresentationalComponents/TopicsTable/TopicsTable.js b/src/PresentationalComponents/TopicsTable/TopicsTable.js
@@ -8,7 +8,6 @@ import {
 
 import { Label } from '@patternfly/react-core/dist/esm/components/Label/Label';
 import Link from '@redhat-cloud-services/frontend-components/InsightsLink';
-import Loading from '../../PresentationalComponents/Loading/Loading';
 import MessageState from '../../PresentationalComponents/MessageState/MessageState';
 import { PrimaryToolbar } from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
 import PropTypes from 'prop-types';
@@ -19,6 +18,7 @@ import messages from '../../Messages';
 import { useIntl } from 'react-intl';
 import { sortTopics } from '../helper';
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter';
+import { SkeletonTable } from '@patternfly/react-component-groups';
 
 const TopicsTable = ({ props }) => {
   const intl = useIntl();
@@ -137,7 +137,13 @@ const TopicsTable = ({ props }) => {
   return (
     <React.Fragment>
       {isLoading || isFetching ? (
-        <Loading />
+        <>
+          <PrimaryToolbar
+            filterConfig={{ items: filterConfigItems }}
+            activeFiltersConfig={activeFiltersConfig}
+          />
+          <SkeletonTable columns={cols.map((c) => c.title)} />
+        </>
       ) : !isFetching && topics.length > 0 ? (
         <React.Fragment>
           <PrimaryToolbar

diff --git a/src/SmartComponents/HybridInventoryTabs/HybridInventoryTabs.js b/src/SmartComponents/HybridInventoryTabs/HybridInventoryTabs.js
@@ -1,4 +1,4 @@
-import React, { Suspense, Fragment, lazy, useContext } from 'react';
+import React, { Suspense, lazy, useContext } from 'react';
 import propTypes from 'prop-types';
 import AsynComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import { useFeatureFlag } from '../../Utilities/Hooks';
@@ -42,7 +42,13 @@ const HybridInventory = ({
       appName="inventory"
       module="./HybridInventoryTabs"
       ConventionalSystemsTab={
-        <Suspense fallback={Fragment}>
+        <Suspense
+          fallback={
+            <Bullseye>
+              <Spinner size="lg" />
+            </Bullseye>
+          }
+        >
           {tabProps.isRecommendationDetail ? (
             <RecommendationSystems {...tabProps} />
           ) : (
@@ -51,7 +57,13 @@ const HybridInventory = ({
         </Suspense>
       }
       ImmutableDevicesTab={
-        <Suspense fallback={Fragment}>
+        <Suspense
+          fallback={
+            <Bullseye>
+              <Spinner size="xl" />
+            </Bullseye>
+          }
+        >
           <ImmutableDevices {...tabProps} />
         </Suspense>
       }

diff --git a/src/SmartComponents/Recs/List.js b/src/SmartComponents/Recs/List.js
@@ -7,7 +7,6 @@ import { useLocation } from 'react-router-dom';
 import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
 
 import DownloadExecReport from '../../PresentationalComponents/ExecutiveReport/Download';
-import Loading from '../../PresentationalComponents/Loading/Loading';
 import { PERMS } from '../../AppConstants';
 import { QuestionTooltip } from '../../PresentationalComponents/Common/Common';
 import messages from '../../Messages';
@@ -22,6 +21,8 @@ import {
   Stack,
   StackItem,
   Tooltip,
+  Spinner,
+  Bullseye,
 } from '@patternfly/react-core';
 
 import { RECOMMENDATIONS_TAB, PATHWAYS_TAB } from '../../AppConstants';
@@ -100,7 +101,13 @@ const List = () => {
                 }
               >
                 {activeTab === PATHWAYS_TAB && (
-                  <Suspense fallback={<Loading />}>
+                  <Suspense
+                    fallback={
+                      <Bullseye>
+                        <Spinner size="xl" />
+                      </Bullseye>
+                    }
+                  >
                     <PathwaysTable isTabActive={activeTab === PATHWAYS_TAB} />
                   </Suspense>
                 )}

diff --git a/src/SmartComponents/Recs/RecsTableLoading.js b/src/SmartComponents/Recs/RecsTableLoading.js
diff --git a/src/SmartComponents/SystemAdvisor/SystemAdvisor.js b/src/SmartComponents/SystemAdvisor/SystemAdvisor.js
@@ -4,7 +4,7 @@ import {
   FILTER_CATEGORIES as FC,
   INVENTORY_BASE_URL,
 } from '../../AppConstants';
-import { Card, CardBody, Spinner } from '@patternfly/react-core';
+import { Spinner } from '@patternfly/react-core';
 import { useIntl } from 'react-intl';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { SortByDirection, TableVariant } from '@patternfly/react-table';
@@ -16,7 +16,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Get } from '../../Utilities/Api';
-import { List } from 'react-content-loader';
 import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
 import PropTypes from 'prop-types';
 import RemediationButton from '@redhat-cloud-services/frontend-components-remediations/RemediationButton';
@@ -36,6 +35,7 @@ import { usePermissions } from '@redhat-cloud-services/frontend-components-utili
 import * as AppConstants from '../../AppConstants';
 import { useParams } from 'react-router-dom';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { SkeletonTable } from '@redhat-cloud-services/frontend-components/SkeletonTable';
 
 const BaseSystemAdvisor = ({ entity, inventoryId }) => {
   const intl = useIntl();
@@ -462,11 +462,7 @@ const BaseSystemAdvisor = ({ entity, inventoryId }) => {
         />
       )}
       {inventoryReportFetchStatus === 'pending' && (
-        <Card>
-          <CardBody>
-            <List />
-          </CardBody>
-        </Card>
+        <SkeletonTable columns={cols.map((c) => c.title)} />
       )}
       {inventoryReportFetchStatus === 'fulfilled' && (
         <Fragment>