Add loader

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/views/workflow-summary-tab/workflow-summary-tab-json-view/__tests__/workflow-summary-tab-json-view.test.tsx

@@ -15,6 +15,9 @@ jest.mock(
 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,18 +28,33 @@ describe('WorkflowSummaryTabJsonView Component', () => {
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
     expect(getByText('SegmentedControlRounded Mock')).toBeInTheDocument();
     expect(getByText('PrettyJson Mock')).toBeInTheDocument();
   });
 
+  it('renders loading state correctly', () => {
+    const { getByText } = render(
+      <WorkflowSummaryTabJsonView
+        inputJson={inputJson}
+        resultJson={resultJson}
+        isWorkflowRunning={true}
+      />
+    );
+
+    expect(getByText('SegmentedControlRounded Mock')).toBeInTheDocument();
+    expect(getByText('Mock JSON skeleton')).toBeInTheDocument();
+  });
+
   it('handles tab change', () => {
     render(
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
@@ -51,6 +69,7 @@ describe('WorkflowSummaryTabJsonView Component', () => {
       <WorkflowSummaryTabJsonView
         inputJson={inputJson}
         resultJson={resultJson}
+        isWorkflowRunning={false}
       />
     );
 
@@ -67,6 +86,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.styles.ts

@@ -6,7 +6,7 @@ import type {
 const cssStylesObj = {
   jsonViewContainer: (theme) => ({
     padding: theme.sizing.scale600,
-    backgroundColor: theme.colors.backgroundSecondary,
+    backgroundColor: '#F8F8F8',
     borderRadius: theme.borders.radius300,
   }),
   jsonViewHeader: (theme) => ({
@@ -15,9 +15,6 @@ 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,13 +2,13 @@
 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';
 
 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';
 
@@ -70,9 +70,7 @@ export default function WorkflowSummaryTabJsonView({
         </Tooltip>
       </div>
       {activeTab === 'result' && isWorkflowRunning ? (
-        <div className={cls.spinnerContainer}>
-          <Spinner $size={16} />
-        </div>
+        <PrettyJsonSkeleton width="200px" />
       ) : (
         <PrettyJson json={jsonMap[activeTab]} />
       )}

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

@@ -2,7 +2,6 @@
 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';