From ee2dbab221cf6f64e2e6457c4037e8954b021f94 Mon Sep 17 00:00:00 2001
From: Manojava Koushik <111366021+manojava-gk@users.noreply.github.com>
Date: Mon, 11 Sep 2023 19:30:13 +0530
Subject: [PATCH] bugfix(page laoding): do not show no items component (#250)

---
 CHANGELOG.md                                  |   2 +
 src/components/pages/AppOverview/index.tsx    |   9 +-
 .../components/ServiceListOverview.tsx        | 104 +++++++++++-------
 .../shared/templates/Subscription/index.tsx   |   2 +-
 4 files changed, 71 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8deea88bb..f59261453 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@
   - Enable credential reset
 - Serview Overview
   - Added Sub menu for active services in service overview
+- Page Loading and Error Component
+  - Show loading component and based on the response show "No items" component or ErrorBar component
 - App management
   - Fixed page break
 - App Overview
diff --git a/src/components/pages/AppOverview/index.tsx b/src/components/pages/AppOverview/index.tsx
index 20648766d..7972b0521 100644
--- a/src/components/pages/AppOverview/index.tsx
+++ b/src/components/pages/AppOverview/index.tsx
@@ -272,9 +272,6 @@ export default function AppOverview() {
             </div>
           ) : (
             <>
-              {filterItem && filterItem.length === 0 && isSuccess && (
-                <NoItems />
-              )}
               {!isSuccess && (
                 <ErrorBar
                   errorText={t('error.errorBar')}
@@ -283,11 +280,13 @@ export default function AppOverview() {
                   showButton={true}
                 />
               )}
-              {filterItem && filterItem.length > 0 && isSuccess && (
+              {filterItem && filterItem.length > 0 && isSuccess ? (
                 <AppOverviewList
-                  filterItem={filterItem ?? []}
+                  filterItem={filterItem}
                   showOverlay={showOverlay}
                 />
+              ) : (
+                <NoItems />
               )}
             </>
           )}
diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx
index 6ea5a0ffe..206bbe1cf 100644
--- a/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx
+++ b/src/components/pages/ServiceReleaseProcess/components/ServiceListOverview.tsx
@@ -28,9 +28,9 @@ import {
   Cards,
   LoadMoreButton,
   CardItems,
+  ErrorBar,
 } from '@catena-x/portal-shared-components'
 import { serviceToCard } from 'features/apps/mapper'
-import { Box } from '@mui/material'
 import { fetchImageWithToken } from 'services/ImageService'
 import {
   ProvidedServices,
@@ -46,6 +46,7 @@ import debounce from 'lodash.debounce'
 import { setServiceId } from 'features/serviceManagement/actions'
 import { useDispatch } from 'react-redux'
 import { setServiceReleaseActiveStep } from 'features/serviceManagement/slice'
+import { Box, useTheme, CircularProgress } from '@mui/material'
 
 enum ServiceSubMenuItems {
   DEACTIVATE = 'deactivate',
@@ -65,8 +66,10 @@ export default function ServiceListOverview() {
       statusFilter: '',
     },
   })
-  const { data } = useFetchProvidedServicesQuery(argsData)
+  const { data, isFetching, isSuccess, refetch } =
+    useFetchProvidedServicesQuery(argsData)
   const dispatch = useDispatch()
+  const theme = useTheme()
 
   const submenuOptions = [
     {
@@ -194,48 +197,69 @@ export default function ServiceListOverview() {
         </Box>
       </div>
       <section>
-        {items && items.length > 0 ? (
-          <div className="desc-card">
-            <Cards
-              items={items}
-              columns={4}
-              buttonText="Details"
-              variant="minimal"
-              filledBackground={false}
-              imageSize={'small'}
-              imageLoader={fetchImageWithToken}
-              showAddNewCard={false}
-              newButtonText={t('serviceoverview.addbtn')}
-              onNewCardButton={() =>
-                navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
-              }
-              onCardClick={(item: CardItems) => {
-                // TODO: workaround - fix CardItems type
-                const cardItem: any = item
-                if (
-                  cardItem.status === ProvidedServiceStatusEnum.PENDING ||
-                  cardItem.status === ProvidedServiceStatusEnum.CREATED
-                ) {
-                  dispatch(setServiceId(item.id ?? ''))
-                  navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
-                } else {
-                  navigate(`/${PAGES.SERVICE_DETAIL}/${item.id}`)
-                }
+        {isFetching ? (
+          <div style={{ textAlign: 'center' }}>
+            <CircularProgress
+              size={50}
+              sx={{
+                color: theme.palette.primary.main,
               }}
-              subMenu={true}
-              submenuOptions={submenuOptions}
-              submenuClick={(sortMenu: string, id: string | undefined) => {
-                sortMenu === ServiceSubMenuItems.DEACTIVATE &&
-                  navigate(`/${PAGES.DEACTIVATE}/${id}`, {
-                    state: items,
-                  })
-                return undefined
-              }}
-              tooltipText={t('serviceoverview.submenuNotAvailable')}
             />
           </div>
         ) : (
-          <NoItems />
+          <>
+            {!isSuccess && (
+              <ErrorBar
+                errorText={t('error.errorBar')}
+                handleButton={refetch}
+                buttonText={t('error.tryAgain')}
+                showButton={true}
+              />
+            )}
+            {items && items.length > 0 && isSuccess ? (
+              <div className="desc-card">
+                <Cards
+                  items={items}
+                  columns={4}
+                  buttonText="Details"
+                  variant="minimal"
+                  filledBackground={false}
+                  imageSize={'small'}
+                  imageLoader={fetchImageWithToken}
+                  showAddNewCard={false}
+                  newButtonText={t('serviceoverview.addbtn')}
+                  onNewCardButton={() =>
+                    navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
+                  }
+                  onCardClick={(item: CardItems) => {
+                    // TODO: workaround - fix CardItems type
+                    const cardItem: any = item
+                    if (
+                      cardItem.status === ProvidedServiceStatusEnum.PENDING ||
+                      cardItem.status === ProvidedServiceStatusEnum.CREATED
+                    ) {
+                      dispatch(setServiceId(item.id ?? ''))
+                      navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
+                    } else {
+                      navigate(`/${PAGES.SERVICE_DETAIL}/${item.id}`)
+                    }
+                  }}
+                  subMenu={true}
+                  submenuOptions={submenuOptions}
+                  submenuClick={(sortMenu: string, id: string | undefined) => {
+                    sortMenu === ServiceSubMenuItems.DEACTIVATE &&
+                      navigate(`/${PAGES.DEACTIVATE}/${id}`, {
+                        state: items,
+                      })
+                    return undefined
+                  }}
+                  tooltipText={t('serviceoverview.submenuNotAvailable')}
+                />
+              </div>
+            ) : (
+              <NoItems />
+            )}
+          </>
         )}
       </section>
       <div
diff --git a/src/components/shared/templates/Subscription/index.tsx b/src/components/shared/templates/Subscription/index.tsx
index d6d092235..f279c3e39 100644
--- a/src/components/shared/templates/Subscription/index.tsx
+++ b/src/components/shared/templates/Subscription/index.tsx
@@ -535,7 +535,7 @@ export default function Subscription({
                 })}
               </div>
             )}
-            {!subscriptions ? (
+            {isFetching ? (
               <div className="loading-progress">
                 <CircularProgress
                   size={50}