improvement(ui): unify loading animations by j15z · Pull Request #7746 · simstudioai/sim

j15z · 2026-09-10T23:15:29Z

Summary

Use one shared dot spinner with weighted rotation across loading states.
Reuse the wordmark morph for workflow/workspace loading, with flat theme colors and matching empty-state size and alignment.
Show loading feedback immediately when switching workflows.
Refine the node run spinner and round the running strip to match the action buttons.

Type of Change

Testing

108 focused tests passed across navigation, wordmark animation, sidebar, find bar, and landing demos.
Full lint passed across 26 workspaces.
All 46 repository audits passed, including strict API boundary validation.
Block registry and docs manifest checks passed.
Review light/dark loading-to-empty-state alignment, workflow switching, and node running/Stop states.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

No screenshots or videos attached.

Use Relay for shared loading indicators and the Sim wordmark morph for workspace and workflow loading. Show workflow navigation feedback as soon as a destination is selected, including sidebar and search navigation.

…g-animatinos # Conflicts: # apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx

Replace the relay loader with a compact fading highlight around a ring. Keep the weighted orbit and reduced-motion fallback. This commit records the gradient variant before returning to the orbiting-dot design.

Replace the gradient highlight with a solid dot on a 3-unit ring. Record the dot variant with its slowdown centered at the top before experimenting with a clockwise offset.

Keep the dot moving through the top while accelerating through the bottom. Rotate the ring and dot together so their alignment stays fixed when scaled. This commit records the updated dot spinner variant.

Give the running strip and Stop highlight matching 15-degree edges with rounded corners and a 2.75px gap. Round the strip's outer end to follow the node contour, and preserve the thicker dot loader at 16px in the run button. Checkpoint for the slanted strip version before trying a vertical gap.

Use Static in light mode and Graphite in dark mode for workflow loading, while keeping the existing gradients available for the landing page. Remove the temporary pinned preview so loading ends normally. Checkpoint the rounded vertical gap between the Stop highlight and the running strip before restoring the slanted strip version for comparison.

…g-animations

vercel · 2026-09-10T23:15:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 10, 2026 11:17pm UTC

greptile-apps · 2026-09-10T23:19:00Z

Confidence Score: 4/5

The PR appears safe to merge after non-blocking UI issues around incomplete navigation coverage and short-canvas command clipping are addressed.

Findings

Navigation feedback is incomplete ▶
Commands can be clipped ▶

Summary

Introduces shared wordmark frame, morph, and workflow-loader components.
Replaces bespoke spinners across workspace and landing-page surfaces.
Adds a workspace-level workflow-navigation provider and loading overlay.
Refines running-node action-bar geometry and animation styling.
Leaves some workflow-switch actions outside the new navigation feedback path and introduces clipping risk in the empty-workflow command layout.

Diagram

sequenceDiagram
    participant User
    participant Navigation as Workflow navigation helper
    participant Overlay as Loading overlay
    participant Router
    participant Editor as Workflow editor
    User->>Navigation: Select covered workflow link
    Navigation->>Overlay: Set optimistic pending state
    Navigation->>Router: Push destination
    Overlay-->>User: Show wordmark immediately
    Router->>Editor: Render destination workflow
    Editor->>Overlay: Report hydration readiness
    Overlay-->>User: Reveal hydrated canvas
    User->>Router: Create, duplicate, or delete-and-switch
    Note over Router,Overlay: Direct router calls bypass immediate pending feedback

_{Reviews (1) · Last reviewed commit: "improvement(ui): unify loading animation..."}

greptile-apps · 2026-09-10T23:19:03Z

+  const navigate = useCallback<NavigateToWorkflow>(
+    (href, options) => {
+      const destination = new URL(href, window.location.href)
+      const isWorkflowSwitch =
+        destination.origin === window.location.origin &&
+        /^\/workspace\/[^/]+\/w\/[^/]+\/?$/.test(destination.pathname) &&
+        destination.pathname !== window.location.pathname
+
+      startTransition(() => {
+        setIsNavigating(isWorkflowSwitch)
+        if (options?.replace) {
+          router.replace(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else if (options) {
+          router.push(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else {
+          router.push(href)
+        }
+      })


Navigation feedback is incomplete

The immediate loading indicator only appears when navigation uses this new callback. Creating a workflow from the sidebar and duplicating the active workflow still call router.push directly, so those user-initiated switches leave the old canvas visible until the destination route commits. Route every workflow switch through the shared navigation function so loading feedback remains consistent.

Knowledge Base Used:

Web application and product surfaces

Workflow authoring and rendering

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

greptile-apps · 2026-09-10T23:19:03Z

+          </g>
+        </WordmarkFrame>
+
+        <div className='-translate-x-1/2 absolute top-full left-1/2 flex w-max flex-col gap-2 pt-5'>


Commands can be clipped

The commands are now positioned below a wordmark that is centered independently, so they no longer participate in vertical centering. Because the containing canvas clips overflow, a canvas around 300px tall or shorter can hide the lower command rows. Keep the complete empty state in normal layout flow or reposition it for short canvases.

j15z added 9 commits September 9, 2026 16:45

fix(ui): unify loaders and show wordmark on workflow navigation

db9a9bc

Use Relay for shared loading indicators and the Sim wordmark morph for workspace and workflow loading. Show workflow navigation feedback as soon as a destination is selected, including sidebar and search navigation.

Merge remote-tracking branch 'origin/staging' into feat/better-loadin…

26d6a2d

…g-animatinos # Conflicts: # apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx

fix(ui): preserve gradient ring loader checkpoint

d390282

Replace the relay loader with a compact fading highlight around a ring. Keep the weighted orbit and reduced-motion fallback. This commit records the gradient variant before returning to the orbiting-dot design.

fix(ui): preserve orbiting dot loader variant

2ab573f

Replace the gradient highlight with a solid dot on a 3-unit ring. Record the dot variant with its slowdown centered at the top before experimenting with a clockwise offset.

fix(ui): tune dot spinner motion and keep orbit aligned

56e8710

Keep the dot moving through the top while accelerating through the bottom. Rotate the ring and dot together so their alignment stays fixed when scaled. This commit records the updated dot spinner variant.

Merge remote-tracking branch 'origin/staging' into feat/better-loadin…

d0abc7f

…g-animations

improvement(ui): unify loading animations

2b431b1

vercel Bot deployed to Preview September 10, 2026 23:17 View deployment

greptile-apps Bot reviewed Sep 10, 2026

View reviewed changes

Navigation Menu

Uh oh!

improvement(ui): unify loading animations - #7746

improvement(ui): unify loading animations#7746
j15z wants to merge 9 commits into
stagingfrom
feat/better-loading-animations

j15z commented Sep 10, 2026 •

edited by andresdjasso

Loading

Uh oh!

vercel Bot commented Sep 10, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Sep 10, 2026 •

edited

Loading

Diagram

Uh oh!

greptile-apps Bot Sep 10, 2026

Uh oh!

greptile-apps Bot Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

j15z commented Sep 10, 2026 • edited by andresdjasso Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of Change

Testing

Checklist

Screenshots/Videos

Uh oh!

vercel Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 4/5

Findings

Summary

Diagram

Uh oh!

greptile-apps Bot Sep 10, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Sep 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

j15z commented Sep 10, 2026 •

edited by andresdjasso

Loading

vercel Bot commented Sep 10, 2026 •

edited

Loading

greptile-apps Bot commented Sep 10, 2026 •

edited

Loading