From c4db68f03c2091192e2b78e0085e75dfea0bb3b9 Mon Sep 17 00:00:00 2001
From: nidhigarg-bmw <101316912+nidhigarg-bmw@users.noreply.github.com>
Date: Mon, 6 May 2024 13:09:59 +0530
Subject: [PATCH] feat(usecase): add loader till response generate (#753)

---
 .../UsecaseParticipation.scss                 |   5 +
 .../pages/UsecaseParticipation/index.tsx      | 224 ++++++++++--------
 2 files changed, 127 insertions(+), 102 deletions(-)

diff --git a/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss b/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss
index 16d5e9232..cff65522a 100644
--- a/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss
+++ b/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss
@@ -71,6 +71,11 @@
     max-width: 850px;
     width: 100%;
     margin: 0 auto 50px;
+    .progress-main {
+      height: 100px;
+      text-align: center;
+      padding: 30px;
+    }
     ul {
       list-style: none;
       .seperation {
diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx
index 67157a622..dde0116d9 100644
--- a/src/components/pages/UsecaseParticipation/index.tsx
+++ b/src/components/pages/UsecaseParticipation/index.tsx
@@ -17,8 +17,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { useTranslation, Trans } from 'react-i18next'
+import { CircularProgress, useTheme } from '@mui/material'
 import {
   Chip,
   PageHeader,
@@ -38,14 +41,13 @@ import {
 } from 'features/usecase/usecaseApiSlice'
 import './UsecaseParticipation.scss'
 import { SubscriptionStatus } from 'features/apps/types'
-import { useEffect } from 'react'
-import { Link } from 'react-router-dom'
 
 export default function UsecaseParticipation() {
   const { t } = useTranslation()
+  const theme = useTheme()
   const dispatch = useDispatch()
 
-  const { data, refetch } = useFetchUsecaseQuery()
+  const { data, refetch, isLoading } = useFetchUsecaseQuery()
 
   useEffect(() => {
     refetch()
@@ -136,116 +138,134 @@ export default function UsecaseParticipation() {
           </div>
           <div className="usecase-list-main">
             <ul>
-              {data?.map((item) => {
-                return (
-                  <div className="usecase-list" key={uniqueId(item.useCase)}>
-                    <li className="usecase-list-item">
-                      <div className="usecase-detail">
-                        <PixIcon />
-                        <div>
-                          <Typography variant="body1" className="usecase-title">
-                            {item.useCase}
-                          </Typography>
-                          <Typography variant="body2">
-                            {item.description}
-                          </Typography>
+              {isLoading ? (
+                <div className="progress-main">
+                  <CircularProgress
+                    size={35}
+                    sx={{
+                      color: theme.palette.primary.main,
+                      zIndex: 1,
+                      position: 'absolute',
+                    }}
+                  />
+                </div>
+              ) : (
+                data?.map((item) => {
+                  return (
+                    <div className="usecase-list" key={uniqueId(item.useCase)}>
+                      <li className="usecase-list-item">
+                        <div className="usecase-detail">
+                          <PixIcon />
+                          <div>
+                            <Typography
+                              variant="body1"
+                              className="usecase-title"
+                            >
+                              {item.useCase}
+                            </Typography>
+                            <Typography variant="body2">
+                              {item.description}
+                            </Typography>
+                          </div>
                         </div>
-                      </div>
-                    </li>
-                    <ul className="credential-list">
-                      {item.verifiedCredentials.map((credential) => {
-                        return (
-                          <>
-                            <hr className="seperation" />
-                            <li className="credential-list-item">
-                              <Typography
-                                variant="body3"
-                                className="firstSection"
-                              >
-                                {
-                                  credential.externalDetailData
-                                    .verifiedCredentialExternalTypeId
-                                }
-                              </Typography>
-                              <Trans
-                                values={{
-                                  version:
-                                    credential.externalDetailData.version,
-                                }}
-                              >
+                      </li>
+                      <ul className="credential-list">
+                        {item.verifiedCredentials.map((credential) => {
+                          return (
+                            <>
+                              <hr className="seperation" />
+                              <li className="credential-list-item">
                                 <Typography
                                   variant="body3"
-                                  className="secondSection"
+                                  className="firstSection"
                                 >
-                                  {t('content.usecaseParticipation.version')}
+                                  {
+                                    credential.externalDetailData
+                                      .verifiedCredentialExternalTypeId
+                                  }
                                 </Typography>
-                              </Trans>
-                              <Tooltips
-                                tooltipPlacement="top-start"
-                                tooltipText={
-                                  !credential.externalDetailData.template
-                                    ? t(
-                                        'content.usecaseParticipation.nodocument'
-                                      )
-                                    : ''
-                                }
-                                children={
-                                  <Link
-                                    to={credential.externalDetailData.template}
-                                    target={
-                                      credential.externalDetailData.template &&
-                                      '_blank'
-                                    }
-                                    className={`thirdSection ${
-                                      !credential.externalDetailData.template &&
-                                      'documentDisabled'
-                                    }`}
+                                <Trans
+                                  values={{
+                                    version:
+                                      credential.externalDetailData.version,
+                                  }}
+                                >
+                                  <Typography
+                                    variant="body3"
+                                    className="secondSection"
                                   >
-                                    <Typography
-                                      variant="body3"
-                                      className="framework"
+                                    {t('content.usecaseParticipation.version')}
+                                  </Typography>
+                                </Trans>
+                                <Tooltips
+                                  tooltipPlacement="top-start"
+                                  tooltipText={
+                                    !credential.externalDetailData.template
+                                      ? t(
+                                          'content.usecaseParticipation.nodocument'
+                                        )
+                                      : ''
+                                  }
+                                  children={
+                                    <Link
+                                      to={
+                                        credential.externalDetailData.template
+                                      }
+                                      target={
+                                        credential.externalDetailData
+                                          .template && '_blank'
+                                      }
+                                      className={`thirdSection ${
+                                        !credential.externalDetailData
+                                          .template && 'documentDisabled'
+                                      }`}
                                     >
-                                      <LaunchIcon />
-                                      {t(
-                                        'content.usecaseParticipation.framework'
-                                      )}
-                                    </Typography>
-                                  </Link>
-                                }
-                              />
-                              <Trans
-                                values={{
-                                  expiry: credential.externalDetailData.expiry
-                                    ? credential.externalDetailData.expiry.split(
-                                        'T'
-                                      )[0]
-                                    : '',
-                                }}
-                              >
+                                      <Typography
+                                        variant="body3"
+                                        className="framework"
+                                      >
+                                        <LaunchIcon />
+                                        {t(
+                                          'content.usecaseParticipation.framework'
+                                        )}
+                                      </Typography>
+                                    </Link>
+                                  }
+                                />
+                                <Trans
+                                  values={{
+                                    expiry: credential.externalDetailData.expiry
+                                      ? credential.externalDetailData.expiry.split(
+                                          'T'
+                                        )[0]
+                                      : '',
+                                  }}
+                                >
+                                  <Typography
+                                    variant="body3"
+                                    className="forthSection"
+                                  >
+                                    {credential.externalDetailData.expiry
+                                      ? t('content.usecaseParticipation.expiry')
+                                      : 'N/A'}
+                                  </Typography>
+                                </Trans>
                                 <Typography
                                   variant="body3"
-                                  className="forthSection"
+                                  className="fifthSection"
                                 >
-                                  {credential.externalDetailData.expiry
-                                    ? t('content.usecaseParticipation.expiry')
-                                    : 'N/A'}
+                                  {renderStatus(item, credential)}
                                 </Typography>
-                              </Trans>
-                              <Typography
-                                variant="body3"
-                                className="fifthSection"
-                              >
-                                {renderStatus(item, credential)}
-                              </Typography>
-                            </li>
-                          </>
-                        )
-                      })}
-                    </ul>
-                    <hr className="seperation" />
-                  </div>
-                )
-              })}
+                              </li>
+                            </>
+                          )
+                        })}
+                      </ul>
+                      <hr className="seperation" />
+                    </div>
+                  )
+                })
+              )}
             </ul>
           </div>
         </div>