feat(subscription details): implement loader for subscription (#959)

CHANGELOG.md

@@ -10,6 +10,8 @@
 ### Feature
 
 - Use scroll to top button from shared components
+- Subscription Overlay
+  - implement loading state for provider subscription detail overlay
 
 ### Bugfixes
 

src/components/pages/AppSubscription/ActivateSubscriptionOverlay/index.tsx

@@ -29,6 +29,7 @@ import {
   StaticTable,
   type TableType,
   Typography,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import { useTranslation, Trans } from 'react-i18next'
@@ -171,8 +172,23 @@ const ActivateSubscriptionOverlay = ({
               onCloseWithIcon={() => dispatch(closeOverlay())}
             />
             <DialogContent>
-              <StaticTable data={tableData1} horizontal={false} />
-              <StaticTable data={tableData2} horizontal={false} />
+              {loading ? (
+                <div className="loading-progress">
+                  <CircleProgress
+                    size={40}
+                    step={1}
+                    interval={0.1}
+                    colorVariant={'primary'}
+                    variant={'indeterminate'}
+                    thickness={8}
+                  />
+                </div>
+              ) : (
+                <>
+                  <StaticTable data={tableData1} horizontal={false} />
+                  <StaticTable data={tableData2} horizontal={false} />
+                </>
+              )}
             </DialogContent>
             <DialogActions>
               <Button variant="outlined" onClick={closeActivationOverlay}>

src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/index.tsx

@@ -32,6 +32,7 @@ import {
   EditField,
   type TableCellType,
   Tooltips,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import {
   ProcessStep,
@@ -44,6 +45,7 @@ import { SubscriptionStatus } from 'features/apps/types'
 import UserService from 'services/UserService'
 import { ROLES } from 'types/Constants'
 import { useState } from 'react'
+import './style.scss'
 import { SuccessErrorType } from 'features/admin/appuserApiSlice'
 import { isURL } from 'types/Patterns'
 import { SubscriptionTypes } from 'components/shared/templates/Subscription'
@@ -78,7 +80,7 @@ const AppSubscriptionDetailOverlay = ({
   const fetchAPI = isAppSubscription
     ? useFetchSubscriptionDetailQuery
     : useFetchServiceSubDetailQuery
-  const { data, refetch } = fetchAPI({
+  const { data, refetch, isFetching } = fetchAPI({
     appId,
     subscriptionId,
   })
@@ -348,12 +350,29 @@ const AppSubscriptionDetailOverlay = ({
             numberOfSteps={3}
             activePage={getActiveSteps()}
           />
-          <div style={{ marginTop: '30px' }}>
-            <StaticTable data={subscriptionDetails} />
-          </div>
-          <div style={{ marginTop: '20px' }}>
-            <VerticalTableNew data={technicalDetails} />
-          </div>
+          {isFetching ? (
+            <div className="app-subscription-overlay">
+              <div className="loading-progress">
+                <CircleProgress
+                  size={40}
+                  step={1}
+                  interval={0.1}
+                  colorVariant={'primary'}
+                  variant={'indeterminate'}
+                  thickness={8}
+                />
+              </div>
+            </div>
+          ) : (
+            <div>
+              <div style={{ marginTop: '30px' }}>
+                <StaticTable data={subscriptionDetails} />
+              </div>
+              <div style={{ marginTop: '20px' }}>
+                <VerticalTableNew data={technicalDetails} />
+              </div>
+            </div>
+          )}
           <div style={{ marginTop: '20px' }}>
             <Typography
               variant="caption2"

src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss

@@ -0,0 +1,27 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+.app-subscription-overlay {
+  .loading-progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+}