From 3ff38e2ca9e0d63890803325fe7a117e47a0c296 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 9 Mar 2026 11:02:14 +0530 Subject: [PATCH 1/5] feat: add loading states --- .../workspace/[workspaceId]/files/loading.tsx | 65 +++++++++++++++ .../workspace/[workspaceId]/home/loading.tsx | 16 ++++ .../[workspaceId]/knowledge/loading.tsx | 39 +++++++++ .../workspace/[workspaceId]/logs/loading.tsx | 51 ++++++++++++ .../[workspaceId]/schedules/loading.tsx | 79 +++++++++++++++++++ .../[workspaceId]/settings/loading.tsx | 32 ++++++++ .../[workspaceId]/tables/loading.tsx | 47 +++++++++++ 7 files changed, 329 insertions(+) create mode 100644 apps/sim/app/workspace/[workspaceId]/files/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/home/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/logs/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/loading.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/loading.tsx diff --git a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx new file mode 100644 index 0000000000..663b6baecf --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx @@ -0,0 +1,65 @@ +/** + * Loading skeleton for the Files page. + * Matches the layout: purple icon badge + title + description + search bar + file table. + */ +export default function FilesLoading() { + return ( +
+
+
+ {/* Header: icon badge + title */} +
+
+
+
+
+ {/* Description */} +
+
+ + {/* Toolbar: search + upload */} +
+
+
+
+ + {/* Table skeleton */} +
+ {/* Table header */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Table rows */} + {Array.from({ length: 5 }).map((_, i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/home/loading.tsx b/apps/sim/app/workspace/[workspaceId]/home/loading.tsx new file mode 100644 index 0000000000..e67816cc13 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/loading.tsx @@ -0,0 +1,16 @@ +/** + * Loading skeleton for the Home chat page. + * Matches the empty-state centered layout with title + input area. + */ +export default function HomeLoading() { + return ( +
+ {/* Title placeholder */} +
+ {/* Input area placeholder */} +
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx new file mode 100644 index 0000000000..480bffa5bf --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx @@ -0,0 +1,39 @@ +/** + * Loading skeleton for the Knowledge Base page. + * Matches the layout: green icon badge + title + description + search bar + card grid. + */ +export default function KnowledgeLoading() { + return ( +
+
+
+ {/* Header: icon badge + title */} +
+
+
+
+
+ {/* Description */} +
+
+ + {/* Toolbar: search + create */} +
+
+
+
+ + {/* Card grid */} +
+ {Array.from({ length: 8 }).map((_, i) => ( +
+ ))} +
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx new file mode 100644 index 0000000000..b81676e6cd --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx @@ -0,0 +1,51 @@ +/** + * Loading skeleton for the Logs page. + * Matches the custom logs layout: toolbar area + table with header row + body rows. + */ +export default function LogsLoading() { + return ( +
+
+
+ {/* Toolbar placeholder */} +
+
+
+
+
+ + {/* Table container */} +
+
+ {/* Table header */} +
+
+
+
+
+
+
+
+
+ {/* Table rows */} +
+ {Array.from({ length: 8 }).map((_, i) => ( +
+
+
+
+
+
+
+ ))} +
+
+
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx b/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx new file mode 100644 index 0000000000..5e7590bfc2 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx @@ -0,0 +1,79 @@ +/** + * Loading skeleton for the Schedules page. + * Matches the layout: amber icon badge + title + description + search bar + two table sections. + */ +export default function SchedulesLoading() { + return ( +
+
+
+ {/* Header: icon badge + title */} +
+
+
+
+
+ {/* Description */} +
+
+ + {/* Toolbar: search only */} +
+
+
+ + {/* Two table sections */} +
+ {/* Schedules section */} +
+
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+ + {/* Jobs section */} +
+
+ {Array.from({ length: 2 }).map((_, i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx b/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx new file mode 100644 index 0000000000..abfcc8ea67 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx @@ -0,0 +1,32 @@ +/** + * Loading skeleton for the Settings page. + * Matches the centered layout: section title + form fields. + * The settings layout wrapper provides the max-w-[900px] centering and padding. + */ +export default function SettingsLoading() { + return ( +
+ {/* Section title */} +
+ + {/* Form field placeholders */} +
+ {/* Field group 1 */} +
+
+
+
+ {/* Field group 2 */} +
+
+
+
+ {/* Field group 3 */} +
+
+
+
+
+
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx new file mode 100644 index 0000000000..67e80422a9 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx @@ -0,0 +1,47 @@ +/** + * Loading skeleton for the Tables page. + * Matches the ResourceLayout shell: icon badge + title + search bar + table header + rows. + */ +export default function TablesLoading() { + return ( +
+
+
+ {/* Header: icon badge + title + create button */} +
+
+
+
+
+
+
+ + {/* Search bar */} +
+
+
+ + {/* Table skeleton */} +
+ {/* Table header */} +
+
+
+
+
+
+ {/* Table rows */} + {Array.from({ length: 5 }).map((_, i) => ( +
+
+
+
+
+
+ ))} +
+
+
+
+ ) +} From 8e37742e8b6106a5918b2df7fa12b9e5fad08f4f Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 9 Mar 2026 11:02:56 +0530 Subject: [PATCH 2/5] chore: reuse components properly --- .../components/chat-message/chat-message.tsx | 2 +- .../smooth-streaming/smooth-streaming.tsx | 20 ---------- .../copilot-message/copilot-message.tsx | 2 +- .../sim/components/ui/streaming-indicator.tsx | 37 +++++++++++++++++++ 4 files changed, 39 insertions(+), 22 deletions(-) create mode 100644 apps/sim/components/ui/streaming-indicator.tsx diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx index a11983b0be..ea009caa01 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react' -import { StreamingIndicator } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming' +import { StreamingIndicator } from '@/components/ui/streaming-indicator' interface ChatAttachment { id: string diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx index c0965808e8..7fb72028dc 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx @@ -1,29 +1,9 @@ import { memo, useEffect, useRef, useState } from 'react' -import { cn } from '@/lib/core/utils/cn' import { CopilotMarkdownRenderer } from '../markdown-renderer' /** Character animation delay in milliseconds */ const CHARACTER_DELAY = 3 -/** Props for the StreamingIndicator component */ -interface StreamingIndicatorProps { - /** Optional class name for layout adjustments */ - className?: string -} - -/** Shows animated dots during message streaming when no content has arrived */ -export const StreamingIndicator = memo(({ className }: StreamingIndicatorProps) => ( -
-
-
-
-
-
-
-)) - -StreamingIndicator.displayName = 'StreamingIndicator' - /** Props for the SmoothStreamingText component */ interface SmoothStreamingTextProps { /** Content to display with streaming animation */ diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx index 187ff15948..8c3f4705a1 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx @@ -3,6 +3,7 @@ import { type FC, memo, useCallback, useMemo, useRef, useState } from 'react' import { RotateCcw } from 'lucide-react' import { Button } from '@/components/emcn' +import { StreamingIndicator } from '@/components/ui/streaming-indicator' import { OptionsSelector, parseSpecialTags, @@ -12,7 +13,6 @@ import { CheckpointConfirmation, FileAttachmentDisplay, SmoothStreamingText, - StreamingIndicator, ThinkingBlock, UsageLimitActions, } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components' diff --git a/apps/sim/components/ui/streaming-indicator.tsx b/apps/sim/components/ui/streaming-indicator.tsx new file mode 100644 index 0000000000..6402d1df9b --- /dev/null +++ b/apps/sim/components/ui/streaming-indicator.tsx @@ -0,0 +1,37 @@ +'use client' + +import { memo } from 'react' +import { cn } from '@/lib/core/utils/cn' + +interface StreamingIndicatorProps { + className?: string + variant?: 'dots' | 'pulse' + label?: string +} + +export const StreamingIndicator = memo( + ({ className, variant = 'dots', label }: StreamingIndicatorProps) => { + if (variant === 'pulse') { + return ( +
+
+ {label && ( + {label} + )} +
+ ) + } + + return ( +
+
+
+
+
+
+
+ ) + } +) + +StreamingIndicator.displayName = 'StreamingIndicator' From 6cb3d4fa9c135325bcf098bc631572004cc4ade9 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 9 Mar 2026 11:15:59 +0530 Subject: [PATCH 3/5] chore: updated loading states --- apps/sim/app/workspace/[workspaceId]/files/loading.tsx | 10 ---------- apps/sim/app/workspace/[workspaceId]/home/loading.tsx | 6 ------ .../app/workspace/[workspaceId]/knowledge/loading.tsx | 8 -------- apps/sim/app/workspace/[workspaceId]/logs/loading.tsx | 8 -------- .../app/workspace/[workspaceId]/schedules/loading.tsx | 10 ---------- .../app/workspace/[workspaceId]/settings/loading.tsx | 10 ---------- .../sim/app/workspace/[workspaceId]/tables/loading.tsx | 9 --------- 7 files changed, 61 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx index 663b6baecf..f5b13c1063 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx @@ -1,31 +1,22 @@ -/** - * Loading skeleton for the Files page. - * Matches the layout: purple icon badge + title + description + search bar + file table. - */ export default function FilesLoading() { return (
- {/* Header: icon badge + title */}
- {/* Description */}
- {/* Toolbar: search + upload */}
- {/* Table skeleton */}
- {/* Table header */}
@@ -40,7 +31,6 @@ export default function FilesLoading() {
- {/* Table rows */} {Array.from({ length: 5 }).map((_, i) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/loading.tsx b/apps/sim/app/workspace/[workspaceId]/home/loading.tsx index e67816cc13..5f2ae3aedd 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/loading.tsx @@ -1,13 +1,7 @@ -/** - * Loading skeleton for the Home chat page. - * Matches the empty-state centered layout with title + input area. - */ export default function HomeLoading() { return (
- {/* Title placeholder */}
- {/* Input area placeholder */}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx index 480bffa5bf..f9d007785d 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx @@ -1,29 +1,21 @@ -/** - * Loading skeleton for the Knowledge Base page. - * Matches the layout: green icon badge + title + description + search bar + card grid. - */ export default function KnowledgeLoading() { return (
- {/* Header: icon badge + title */}
- {/* Description */}
- {/* Toolbar: search + create */}
- {/* Card grid */}
{Array.from({ length: 8 }).map((_, i) => (
- {/* Toolbar placeholder */}
- {/* Table container */}
- {/* Table header */}
@@ -27,7 +20,6 @@ export default function LogsLoading() {
- {/* Table rows */}
{Array.from({ length: 8 }).map((_, i) => (
- {/* Header: icon badge + title */}
- {/* Description */}
- {/* Toolbar: search only */}
- {/* Two table sections */}
- {/* Schedules section */}
{Array.from({ length: 3 }).map((_, i) => ( @@ -48,7 +39,6 @@ export default function SchedulesLoading() { ))}
- {/* Jobs section */}
{Array.from({ length: 2 }).map((_, i) => ( diff --git a/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx b/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx index abfcc8ea67..a17270905c 100644 --- a/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/settings/loading.tsx @@ -1,27 +1,17 @@ -/** - * Loading skeleton for the Settings page. - * Matches the centered layout: section title + form fields. - * The settings layout wrapper provides the max-w-[900px] centering and padding. - */ export default function SettingsLoading() { return (
- {/* Section title */}
- {/* Form field placeholders */}
- {/* Field group 1 */}
- {/* Field group 2 */}
- {/* Field group 3 */}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx index 67e80422a9..bdd040f5a2 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx @@ -1,13 +1,8 @@ -/** - * Loading skeleton for the Tables page. - * Matches the ResourceLayout shell: icon badge + title + search bar + table header + rows. - */ export default function TablesLoading() { return (
- {/* Header: icon badge + title + create button */}
@@ -16,21 +11,17 @@ export default function TablesLoading() {
- {/* Search bar */}
- {/* Table skeleton */}
- {/* Table header */}
- {/* Table rows */} {Array.from({ length: 5 }).map((_, i) => (
From 4c52ed2c7f531ac7a45ee2fff88138c17789252c Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 9 Mar 2026 14:55:55 +0530 Subject: [PATCH 4/5] chore: fixed padding values --- apps/sim/app/workspace/[workspaceId]/files/loading.tsx | 2 +- apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx | 2 +- apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx index f5b13c1063..07ac2fca87 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx @@ -2,7 +2,7 @@ export default function FilesLoading() { return (
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx index f9d007785d..92bf4e25ea 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx @@ -2,7 +2,7 @@ export default function KnowledgeLoading() { return (
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx b/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx index 9b27aeb74b..871b4b7a1d 100644 --- a/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx +++ b/apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx @@ -2,7 +2,7 @@ export default function SchedulesLoading() { return (
-
+
From 65564fe716096bed3374561094c43f6d74a843f6 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Mon, 9 Mar 2026 15:06:10 +0530 Subject: [PATCH 5/5] chore: update streaming indicator props --- .../sim/components/ui/streaming-indicator.tsx | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/apps/sim/components/ui/streaming-indicator.tsx b/apps/sim/components/ui/streaming-indicator.tsx index 6402d1df9b..d732baa5dc 100644 --- a/apps/sim/components/ui/streaming-indicator.tsx +++ b/apps/sim/components/ui/streaming-indicator.tsx @@ -5,33 +5,20 @@ import { cn } from '@/lib/core/utils/cn' interface StreamingIndicatorProps { className?: string - variant?: 'dots' | 'pulse' label?: string } -export const StreamingIndicator = memo( - ({ className, variant = 'dots', label }: StreamingIndicatorProps) => { - if (variant === 'pulse') { - return ( -
-
- {label && ( - {label} - )} -
- ) - } - - return ( -
-
-
-
-
-
+export const StreamingIndicator = memo(({ className, label }: StreamingIndicatorProps) => { + return ( +
+
+
+
+
- ) - } -) + {label && {label}} +
+ ) +}) StreamingIndicator.displayName = 'StreamingIndicator'