Skip to content

refactor(ui): shared StreamingIndicator and workspace route loading skeletons #3482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adithyaakrishna wants to merge 5 commits into
base: feat/mothership-copilot
Choose a base branch
from
+294 −22
Open

refactor(ui): shared StreamingIndicator and workspace route loading skeletons #3482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ff38e2
feat: add loading states
adithyaakrishna Mar 9, 2026
8e37742
chore: reuse components properly
adithyaakrishna Mar 9, 2026
6cb3d4f
chore: updated loading states
adithyaakrishna Mar 9, 2026
4c52ed2
chore: fixed padding values
adithyaakrishna Mar 9, 2026
65564fe
chore: update streaming indicator props
adithyaakrishna Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/files/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
export default function FilesLoading() {
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-6 pt-7 pb-6 dark:bg-[var(--bg)]'>
<div>
<div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] animate-pulse items-center justify-center rounded-[6px] border border-[#8B5CF6] bg-[#F5F3FF] dark:border-[#5B21B6] dark:bg-[#2E1065]' />
<div className='h-[22px] w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='mt-[10px] h-[18px] w-[360px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>

<div className='mt-[14px] flex items-center justify-between'>
<div className='h-[32px] w-[400px] animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
<div className='h-[32px] w-[80px] animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
</div>

<div className='mt-[24px]'>
<div className='flex items-center border-b py-[8px]'>
<div className='w-[56%] px-[12px]'>
<div className='h-3 w-[40px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[14%] px-[12px]'>
<div className='h-3 w-[30px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-3 w-[60px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-3 w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
</div>
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className='flex items-center border-b py-[8px]'>
<div className='w-[56%] px-[12px]'>
<div className='h-4 w-[70%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[14%] px-[12px]'>
<div className='h-4 w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[70px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[40px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
</div>
))}
</div>
</div>
</div>
</div>
)
}
10 changes: 10 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/home/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export default function HomeLoading() {
return (
<div className='flex h-full flex-col items-center justify-center bg-[#FCFCFC] px-[24px] dark:bg-[var(--surface-2)]'>
<div className='mb-[24px] h-[38px] w-[320px] animate-pulse rounded-[8px] bg-[var(--surface-5)]' />
<div className='w-full max-w-[640px]'>
<div className='h-[52px] w-full animate-pulse rounded-[16px] bg-[var(--surface-5)]' />
</div>
</div>
)
}
31 changes: 31 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
export default function KnowledgeLoading() {
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-6 pt-7 pb-6 dark:bg-[var(--bg)]'>
<div>
<div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] animate-pulse items-center justify-center rounded-[6px] border border-[#5BB377] bg-[#E8F7EE] dark:border-[#1E5A3E] dark:bg-[#0F3D2C]' />
<div className='h-[22px] w-[140px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='mt-[10px] h-[18px] w-[340px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>

<div className='mt-[14px] flex items-center justify-between'>
<div className='h-[32px] w-[400px] animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
<div className='h-[32px] w-[80px] animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
</div>

<div className='mt-[24px] grid grid-cols-1 gap-[20px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
{Array.from({ length: 8 }).map((_, i) => (
<div
key={i}
className='h-[120px] animate-pulse rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)]'
/>
))}
</div>
</div>
</div>
</div>
)
}
43 changes: 43 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
export default function LogsLoading() {
return (
<div className='flex h-full flex-1 flex-col overflow-hidden'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto bg-white pt-[28px] pl-[24px] dark:bg-[var(--bg)]'>
<div className='flex items-center gap-[12px] pr-[24px]'>
<div className='h-[32px] w-[240px] animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
<div className='h-[32px] w-[100px] animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
<div className='ml-auto h-[32px] w-[80px] animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
</div>

<div className='relative mt-[24px] flex min-h-0 flex-1 flex-col overflow-hidden rounded-[6px] pr-[24px]'>
<div className='flex min-h-0 flex-1 flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
<div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
<div className='flex items-center gap-[16px]'>
<div className='h-3 w-[120px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[80px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[100px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[60px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[80px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
</div>
<div className='flex-1 px-[24px]'>
{Array.from({ length: 8 }).map((_, i) => (
<div
key={i}
className='flex items-center gap-[16px] border-[var(--border)] border-b py-[10px]'
>
<div className='h-4 w-[120px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[60px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[90px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[70px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
69 changes: 69 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/schedules/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
export default function SchedulesLoading() {
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-6 pt-7 pb-6 dark:bg-[var(--bg)]'>
<div>
<div className='flex items-start gap-[12px]'>
<div className='flex h-[26px] w-[26px] animate-pulse items-center justify-center rounded-[6px] border border-[#F59E0B] bg-[#FFFBEB] dark:border-[#B45309] dark:bg-[#451A03]' />
<div className='h-[22px] w-[90px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='mt-[10px] h-[18px] w-[400px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>

<div className='mt-[14px]'>
<div className='h-[32px] w-[400px] animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
</div>

<div className='mt-[24px] space-y-[32px]'>
<section>
<div className='mb-[12px] h-[18px] w-[80px] animate-pulse rounded bg-[var(--surface-5)]' />
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className='flex items-center border-b py-[8px]'>
<div className='w-[30%] px-[12px]'>
<div className='h-4 w-[80%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[26%] px-[12px]'>
<div className='h-4 w-[70%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[14%] px-[12px]'>
<div className='h-4 w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[70px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[40px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
</div>
))}
</section>

<section>
<div className='mb-[12px] h-[18px] w-[40px] animate-pulse rounded bg-[var(--surface-5)]' />
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className='flex items-center border-b py-[8px]'>
<div className='w-[30%] px-[12px]'>
<div className='h-4 w-[75%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[26%] px-[12px]'>
<div className='h-4 w-[60%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[14%] px-[12px]'>
<div className='h-4 w-[50px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[70px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='w-[15%] px-[12px]'>
<div className='h-4 w-[40px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
</div>
))}
</section>
</div>
</div>
</div>
</div>
)
}
22 changes: 22 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/settings/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export default function SettingsLoading() {
return (
<div>
<div className='mb-[28px] h-[28px] w-[100px] animate-pulse rounded bg-[var(--surface-5)]' />

<div className='space-y-[24px]'>
<div>
<div className='mb-[8px] h-[14px] w-[80px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-[40px] w-full animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
</div>
<div>
<div className='mb-[8px] h-[14px] w-[120px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-[40px] w-full animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
</div>
<div>
<div className='mb-[8px] h-[14px] w-[60px] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-[40px] w-3/4 animate-pulse rounded-[8px] bg-[var(--surface-4)]' />
</div>
</div>
</div>
)
}
38 changes: 38 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export default function TablesLoading() {
return (
<div className='flex h-full flex-1 flex-col'>
<div className='flex flex-1 overflow-hidden'>
<div className='flex flex-1 flex-col overflow-auto bg-white px-6 pt-7 pb-6 dark:bg-[var(--bg)]'>
<div className='flex items-center justify-between'>
<div className='flex items-center gap-3'>
<div className='h-[26px] w-[26px] animate-pulse rounded-[6px] bg-[#EFF6FF] dark:bg-[#1E3A5F]' />
<div className='h-[20px] w-[60px] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
<div className='h-8 w-[100px] animate-pulse rounded-md bg-[var(--surface-5)]' />
</div>

<div className='mt-3.5'>
<div className='h-8 w-60 animate-pulse rounded-lg bg-[var(--surface-4)]' />
</div>

<div className='mt-4'>
<div className='flex items-center border-b px-4 py-2'>
<div className='h-3 w-[40%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[15%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[15%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-3 w-[18%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className='flex items-center border-b px-4 py-3'>
<div className='h-4 w-[35%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[10%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[10%] animate-pulse rounded bg-[var(--surface-5)]' />
<div className='h-4 w-[14%] animate-pulse rounded bg-[var(--surface-5)]' />
</div>
))}
</div>
</div>
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion ...ace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
20 changes: 0 additions & 20 deletions ...nents/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => (
<div className={cn('flex h-[1.25rem] items-center text-muted-foreground', className)}>
<div className='flex space-x-0.5'>
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms] [animation-duration:1.2s]' />
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms] [animation-duration:1.2s]' />
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms] [animation-duration:1.2s]' />
</div>
</div>
))

StreamingIndicator.displayName = 'StreamingIndicator'

/** Props for the SmoothStreamingText component */
interface SmoothStreamingTextProps {
/** Content to display with streaming animation */
Expand Down
2 changes: 1 addition & 1 deletion ...lowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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'
Expand Down
24 changes: 24 additions & 0 deletions apps/sim/components/ui/streaming-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
'use client'

import { memo } from 'react'
import { cn } from '@/lib/core/utils/cn'

interface StreamingIndicatorProps {
className?: string
label?: string
}

export const StreamingIndicator = memo(({ className, label }: StreamingIndicatorProps) => {
return (
<div className={cn('flex h-[1.25rem] items-center gap-1.5 text-muted-foreground', className)}>
<div className='flex space-x-0.5'>
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms] [animation-duration:1.2s]' />
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms] [animation-duration:1.2s]' />
<div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms] [animation-duration:1.2s]' />
</div>
{label && <span className='text-[13px] text-muted-foreground'>{label}</span>}
</div>
)
})

StreamingIndicator.displayName = 'StreamingIndicator'