diff --git a/src/PresentationalComponents/Inventory/InventoryDetails.js b/src/PresentationalComponents/Inventory/InventoryDetails.js
index be607bbd6..a7a0bbc2c 100644
--- 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
index 8612d7cfe..8c7c4b1eb 100644
--- 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 '@redhat-cloud-services/frontend-components/SkeletonTable';
 
 const PathwaysTable = ({ isTabActive }) => {
   const intl = useIntl();
@@ -389,7 +389,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
index e098a8b51..5faa9b897 100644
--- 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 '@redhat-cloud-services/frontend-components/SkeletonTable';
 
 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)} />
       ) : isError ? (
         <Table>
           <ErrorState />
diff --git a/src/PresentationalComponents/TopicsTable/TopicsTable.js b/src/PresentationalComponents/TopicsTable/TopicsTable.js
index 9059cf702..a7f42e8c9 100644
--- 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 '@redhat-cloud-services/frontend-components/SkeletonTable';
 
 const TopicsTable = ({ props }) => {
   const intl = useIntl();
@@ -138,7 +138,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
index 5a030e4ea..1491a541b 100644
--- 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,7 @@ const HybridInventory = ({
       appName="inventory"
       module="./HybridInventoryTabs"
       ConventionalSystemsTab={
-        <Suspense fallback={Fragment}>
+        <Suspense fallback={<Spinner size="lg" />}>
           {tabProps.isRecommendationDetail ? (
             <RecommendationSystems {...tabProps} />
           ) : (
@@ -51,7 +51,7 @@ const HybridInventory = ({
         </Suspense>
       }
       ImmutableDevicesTab={
-        <Suspense fallback={Fragment}>
+        <Suspense fallback={<Spinner size="lg" />}>
           <ImmutableDevices {...tabProps} />
         </Suspense>
       }
diff --git a/src/SmartComponents/Recs/List.js b/src/SmartComponents/Recs/List.js
index 75d03b7cc..1fa34a66e 100644
--- 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';
@@ -25,6 +24,7 @@ import {
 } from '@patternfly/react-core';
 
 import { RECOMMENDATIONS_TAB, PATHWAYS_TAB } from '../../AppConstants';
+import { SkeletonTable } from '@redhat-cloud-services/frontend-components/SkeletonTable';
 
 const PathwaysTable = lazy(() =>
   import(
@@ -100,7 +100,7 @@ const List = () => {
                 }
               >
                 {activeTab === PATHWAYS_TAB && (
-                  <Suspense fallback={<Loading />}>
+                  <Suspense fallback={<SkeletonTable />}>
                     <PathwaysTable isTabActive={activeTab === PATHWAYS_TAB} />
                   </Suspense>
                 )}
diff --git a/src/SmartComponents/Recs/RecsTableLoading.js b/src/SmartComponents/Recs/RecsTableLoading.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/SmartComponents/SystemAdvisor/SystemAdvisor.js b/src/SmartComponents/SystemAdvisor/SystemAdvisor.js
index 5ca6ab6ec..167bd0798 100644
--- 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>