fix(console): optimize loading screens in app guides (#4441)

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -52,7 +52,7 @@ const mapToUriOriginFormatArrays = (value?: string[]) =>
 function ApplicationDetails() {
   const { id, guideId, tab } = useParams();
   const { navigate, match } = useTenantPathname();
-  const isGuideView = id && guideId && match(`/applications/${id}/guide/${guideId}`);
+  const isGuideView = !!id && !!guideId && match(`/applications/${id}/guide/${guideId}`);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data, error, mutate } = useSWR<ApplicationResponse, RequestError>(
@@ -145,6 +145,18 @@ function ApplicationDetails() {
     setIsReadmeOpen(false);
   };
 
+  if (isGuideView) {
+    return (
+      <GuideModal
+        guideId={guideId}
+        app={data}
+        onClose={(id) => {
+          navigate(`/applications/${id}`);
+        }}
+      />
+    );
+  }
+
   return (
     <DetailsPage
       backLink="/applications"
@@ -242,15 +254,6 @@ function ApplicationDetails() {
         </>
       )}
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} />
-      {isGuideView && (
-        <GuideModal
-          guideId={guideId}
-          app={data}
-          onClose={(id) => {
-            navigate(`/applications/${id}`);
-          }}
-        />
-      )}
     </DetailsPage>
   );
 }

packages/console/src/pages/Applications/components/Guide/index.tsx

@@ -51,7 +51,7 @@ export const GuideContext = createContext<GuideContextType>({
 type Props = {
   className?: string;
   guideId: string;
-  app: ApplicationResponse;
+  app?: ApplicationResponse;
   isCompact?: boolean;
   onClose: () => void;
 };
@@ -67,20 +67,21 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
   const memorizedContext = useMemo(
     () =>
       conditional(
-        !!guide && {
+        !!guide &&
-          metadata: guide.metadata,
+          !!app && {
-          Logo: guide.Logo,
+            metadata: guide.metadata,
-          app,
+            Logo: guide.Logo,
-          endpoint: tenantEndpoint?.toString() ?? '',
+            app,
-          alternativeEndpoint: conditional(isCustomDomainActive && tenantEndpoint?.toString()),
+            endpoint: tenantEndpoint?.toString() ?? '',
-          redirectUris: app.oidcClientMetadata.redirectUris,
+            alternativeEndpoint: conditional(isCustomDomainActive && tenantEndpoint?.toString()),
-          postLogoutRedirectUris: app.oidcClientMetadata.postLogoutRedirectUris,
+            redirectUris: app.oidcClientMetadata.redirectUris,
-          isCompact: Boolean(isCompact),
+            postLogoutRedirectUris: app.oidcClientMetadata.postLogoutRedirectUris,
-          sampleUrls: {
+            isCompact: Boolean(isCompact),
-            origin: 'http://localhost:3001/',
+            sampleUrls: {
-            callback: 'http://localhost:3001/callback',
+              origin: 'http://localhost:3001/',
-          },
+              callback: 'http://localhost:3001/callback',
-        }
+            },
+          }
       ) satisfies GuideContextType | undefined,
     [guide, app, tenantEndpoint, isCustomDomainActive, isCompact]
   );
@@ -88,7 +89,9 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
   return (
     <>
       <OverlayScrollbar className={classNames(styles.content, className)}>
-        {memorizedContext ? (
+        {!app && <StepsSkeleton />}
+        {!!app && !guide && <NotFound className={styles.notFound} />}
+        {memorizedContext && (
           <GuideContext.Provider value={memorizedContext}>
             <MDXProvider
               components={{
@@ -121,8 +124,6 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
               </Suspense>
             </MDXProvider>
           </GuideContext.Provider>
-        ) : (
-          <NotFound className={styles.notFound} />
         )}
       </OverlayScrollbar>
       {memorizedContext && (

packages/console/src/pages/Applications/components/GuideModal/index.tsx

@@ -15,21 +15,14 @@ type Props = {
 };
 
 function GuideModal({ guideId, app, onClose }: Props) {
-  if (!app) {
-    return null;
-  }
-
   const closeModal = () => {
-    onClose(app.id);
+    if (app) {
+      onClose(app.id);
+    }
   };
 
   return (
-    <Modal
+    <Modal shouldCloseOnEsc isOpen className={modalStyles.fullScreen} onRequestClose={closeModal}>
-      shouldCloseOnEsc
-      isOpen={Boolean(app)}
-      className={modalStyles.fullScreen}
-      onRequestClose={closeModal}
-    >
       <div className={styles.modalContainer}>
         <GuideHeader onClose={closeModal} />
         <Guide className={styles.guide} guideId={guideId} app={app} onClose={closeModal} />

packages/console/src/pages/Applications/components/StepsSkeleton/index.module.scss

@@ -1,4 +1,5 @@
 @use '@/scss/underscore' as _;
+@use '@/scss/dimensions' as dim;
 
 .step {
   display: flex;
@@ -6,6 +7,8 @@
   padding: _.unit(5) _.unit(6);
   border-radius: 16px;
   background-color: var(--color-layer-1);
+  max-width: dim.$guide-main-content-max-width;
+  margin: 0 auto;
 
   .index {
     @include _.shimmering-animation;