Show loader skeleton in result view for running workflows (#705)

* init commit for loading

* Add loader

* fix test

* Fix lint issue

* Fix colours

* update snapshots

Author: adhityamamallan

src/components/pretty-json-skeleton/pretty-json-skeleton.styles.ts

@@ -0,0 +1,29 @@
+import { type Theme } from 'baseui';
+import { type SkeletonOverrides } from 'baseui/skeleton/types';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  borderSkeleton: {
+    Row: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        height: $theme.sizing.scale600,
+        borderRadius: $theme.borders.radius500,
+      }),
+    },
+  } satisfies SkeletonOverrides,
+  centralSkeleton: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        marginLeft: $theme.sizing.scale550,
+        marginTop: $theme.sizing.scale400,
+        marginBottom: $theme.sizing.scale400,
+      }),
+    },
+    Row: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        height: $theme.sizing.scale600,
+        borderRadius: $theme.borders.radius500,
+      }),
+    },
+  } satisfies SkeletonOverrides,
+};

src/components/pretty-json-skeleton/pretty-json-skeleton.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { Skeleton } from 'baseui/skeleton';
+
+import { overrides } from './pretty-json-skeleton.styles';
+import { type Props } from './pretty-json-skeleton.types';
+
+export default function PrettyJsonSkeleton({ width }: Props) {
+  return (
+    <div>
+      <Skeleton
+        width="20px"
+        rows={1}
+        overrides={overrides.borderSkeleton}
+        animation
+      />
+      <Skeleton
+        width={width}
+        rows={3}
+        overrides={overrides.centralSkeleton}
+        animation
+      />
+      <Skeleton
+        width="20px"
+        rows={1}
+        overrides={overrides.borderSkeleton}
+        animation
+      />
+    </div>
+  );
+}

src/components/pretty-json-skeleton/pretty-json-skeleton.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  width: string;
+};

src/config/theme/theme-light.config.ts

@@ -12,6 +12,7 @@ const themeLight = {
   colors: {
     borderOpaque: '#F3F3F3',
     backgroundSecondary: '#F3F3F3',
+    backgroundTertiary: '#E8E8E8',
     backgroundWarningLight: '#FDF2DC',
   },
 } satisfies DeepPartial<MakeExtendable<Theme>>;

src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx.snapshot

@@ -376,14 +376,14 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is ON
   animationIterationCount: 'infinite',
   animationName: "keyFrames={\\n  from: { transform: 'rotate(0deg)' },\\n  to: { transform: 'rotate(360deg)' },\\n}\\n",
   animationTimingFunction: 'linear',
-  borderBottomColor: '#EEEEEE',
+  borderBottomColor: '#E8E8E8',
   borderBottomStyle: 'solid',
   borderBottomWidth: 'NaNpx',
-  borderLeftColor: '#EEEEEE',
+  borderLeftColor: '#E8E8E8',
   borderLeftStyle: 'solid',
   borderLeftWidth: 'NaNpx',
   borderRadius: '50%',
-  borderRightColor: '#EEEEEE',
+  borderRightColor: '#E8E8E8',
   borderRightStyle: 'solid',
   borderRightWidth: 'NaNpx',
   borderTopColor: '#276EF1',
@@ -441,14 +441,14 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is ON
   animationIterationCount: 'infinite',
   animationName: "keyFrames={\\n  from: { transform: 'rotate(0deg)' },\\n  to: { transform: 'rotate(360deg)' },\\n}\\n",
   animationTimingFunction: 'linear',
-  borderBottomColor: '#EEEEEE',
+  borderBottomColor: '#E8E8E8',
   borderBottomStyle: 'solid',
   borderBottomWidth: 'NaNpx',
-  borderLeftColor: '#EEEEEE',
+  borderLeftColor: '#E8E8E8',
   borderLeftStyle: 'solid',
   borderLeftWidth: 'NaNpx',
   borderRadius: '50%',
-  borderRightColor: '#EEEEEE',
+  borderRightColor: '#E8E8E8',
   borderRightStyle: 'solid',
   borderRightWidth: 'NaNpx',
   borderTopColor: '#276EF1',

src/views/workflow-queries/workflow-queries-status-icon/__tests__/workflow-queries-status-icon.test.tsx.snapshot

@@ -63,14 +63,14 @@ exports[`WorkflowQueriesStatusIcon should render correctly for fetching status 1
   animationIterationCount: 'infinite',
   animationName: "keyFrames={\\n  from: { transform: 'rotate(0deg)' },\\n  to: { transform: 'rotate(360deg)' },\\n}\\n",
   animationTimingFunction: 'linear',
-  borderBottomColor: '#EEEEEE',
+  borderBottomColor: '#E8E8E8',
   borderBottomStyle: 'solid',
   borderBottomWidth: 'NaNpx',
-  borderLeftColor: '#EEEEEE',
+  borderLeftColor: '#E8E8E8',
   borderLeftStyle: 'solid',
   borderLeftWidth: 'NaNpx',
   borderRadius: '50%',
-  borderRightColor: '#EEEEEE',
+  borderRightColor: '#E8E8E8',
   borderRightStyle: 'solid',
   borderRightWidth: 'NaNpx',
   borderTopColor: '#276EF1',

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

@@ -10,11 +10,19 @@ import WorkflowSummaryTabJsonView from '../workflow-summary-tab-json-view';
 jest.mock('copy-to-clipboard', jest.fn);
 jest.mock(
   '@/components/segmented-control-rounded/segmented-control-rounded',
-  () => jest.fn(() => <div>SegmentedControlRounded Mock</div>)
+  () =>
+    jest.fn(({ onChange }) => (
+      <div onClick={() => onChange({ activeKey: 'result' })}>
+        SegmentedControlRounded Mock
+      </div>
+    ))
 );
 jest.mock('@/components/pretty-json/pretty-json', () =>
   jest.fn(() => <div>PrettyJson Mock</div>)
 );
+jest.mock('@/components/pretty-json-skeleton/pretty-json-skeleton', () =>
+  jest.fn(() => <div>Mock JSON skeleton</div>)
+);
 
 describe('WorkflowSummaryTabJsonView Component', () => {
   const inputJson = { input: 'inputJson' };
@@ -25,6 +33,7 @@ describe('WorkflowSummaryTabJsonView Component', () => {
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
@@ -37,6 +46,7 @@ describe('WorkflowSummaryTabJsonView Component', () => {
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
@@ -46,11 +56,27 @@ describe('WorkflowSummaryTabJsonView Component', () => {
     expect(segmentedControl).toBeInTheDocument();
   });
 
+  it('renders loading state correctly', () => {
+    const { getByText } = render(
+      <WorkflowSummaryTabJsonView
+        inputJson={inputJson}
+        resultJson={resultJson}
+        isWorkflowRunning={true}
+      />
+    );
+
+    // Mock the onChange event for SegmentedControlRounded
+    const segmentedControl = screen.getByText('SegmentedControlRounded Mock');
+    fireEvent.click(segmentedControl);
+    expect(getByText('Mock JSON skeleton')).toBeInTheDocument();
+  });
+
   it('copies JSON to clipboard', () => {
     render(
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
@@ -67,6 +93,7 @@ describe('WorkflowSummaryTabJsonView Component', () => {
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 

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

@@ -8,6 +8,7 @@ import { MdCopyAll } from 'react-icons/md';
 
 import PrettyJson from '@/components/pretty-json/pretty-json';
 import { type JsonValue } from '@/components/pretty-json/pretty-json.types';
+import PrettyJsonSkeleton from '@/components/pretty-json-skeleton/pretty-json-skeleton';
 import SegmentedControlRounded from '@/components/segmented-control-rounded/segmented-control-rounded';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
@@ -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,11 @@ export default function WorkflowSummaryTabJsonView({
           </Button>
         </Tooltip>
       </div>
-      <PrettyJson json={jsonMap[activeTab]} />
+      {activeTab === 'result' && isWorkflowRunning ? (
+        <PrettyJsonSkeleton width="200px" />
+      ) : (
+        <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

@@ -15,6 +15,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 +63,11 @@ export default function WorkflowSummaryTab({
       ? formattedCloseEvent.result
       : undefined;
 
+  const isWorkflowRunning =
+    !closeEvent ||
+    !closeEvent.attributes ||
+    !getWorkflowIsCompleted(closeEvent.attributes);
+
   return (
     <PageSection>
       <div className={cls.pageContainer}>
@@ -84,6 +90,7 @@ export default function WorkflowSummaryTab({
                 : []
             }
             resultJson={resultJson}
+            isWorkflowRunning={isWorkflowRunning}
           />
         </div>
       </div>