init commit for loading

Author: adhityamamallan

src/views/workflow-summary-tab/workflow-summary-tab-json-view/workflow-summary-tab-json-view.styles.ts

@@ -15,6 +15,9 @@ const cssStylesObj = {
     gap: theme.sizing.scale600,
     marginBottom: theme.sizing.scale700,
   }),
+  spinnerContainer: (theme) => ({
+    paddingLeft: 0,
+  }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

src/views/workflow-summary-tab/workflow-summary-tab-json-view/workflow-summary-tab-json-view.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { Button, KIND as BUTTON_KIND, SHAPE, SIZE } from 'baseui/button';
+import { Spinner } from 'baseui/spinner';
 import { ACCESSIBILITY_TYPE, Tooltip } from 'baseui/tooltip';
 import copy from 'copy-to-clipboard';
 import { MdCopyAll } from 'react-icons/md';
@@ -18,6 +19,7 @@ import type { Props } from './workflow-summary-tab-json-view.types';
 export default function WorkflowSummaryTabJsonView({
   inputJson,
   resultJson,
+  isWorkflowRunning,
 }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
   const [showTooltip, setShowTooltip] = useState(false);
@@ -67,7 +69,13 @@ export default function WorkflowSummaryTabJsonView({
           </Button>
         </Tooltip>
       </div>
-      <PrettyJson json={jsonMap[activeTab]} />
+      {activeTab === 'result' && isWorkflowRunning ? (
+        <div className={cls.spinnerContainer}>
+          <Spinner $size={16} />
+        </div>
+      ) : (
+        <PrettyJson json={jsonMap[activeTab]} />
+      )}
     </div>
   );
 }

src/views/workflow-summary-tab/workflow-summary-tab-json-view/workflow-summary-tab-json-view.types.ts

@@ -3,4 +3,5 @@ import { type JsonValue } from '@/components/pretty-json/pretty-json.types';
 export type Props = {
   inputJson: JsonValue;
   resultJson: JsonValue;
+  isWorkflowRunning: boolean;
 };

src/views/workflow-summary-tab/workflow-summary-tab.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { Spinner } from 'baseui/spinner';
 import queryString from 'query-string';
 
 import PageSection from '@/components/page-section/page-section';
@@ -15,6 +16,7 @@ import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
 import type { WorkflowPageTabContentProps } from '@/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types';
 
+import getWorkflowIsCompleted from '../workflow-page/helpers/get-workflow-is-completed';
 import useDescribeWorkflow from '../workflow-page/hooks/use-describe-workflow';
 
 import WorkflowSummaryTabDetails from './workflow-summary-tab-details/workflow-summary-tab-details';
@@ -62,6 +64,11 @@ export default function WorkflowSummaryTab({
       ? formattedCloseEvent.result
       : undefined;
 
+  const isWorkflowRunning =
+    !closeEvent ||
+    !closeEvent.attributes ||
+    !getWorkflowIsCompleted(closeEvent.attributes);
+
   return (
     <PageSection>
       <div className={cls.pageContainer}>
@@ -84,6 +91,7 @@ export default function WorkflowSummaryTab({
                 : []
             }
             resultJson={resultJson}
+            isWorkflowRunning={isWorkflowRunning}
           />
         </div>
       </div>