fix automation list flicker on initial load#3772
Conversation
Wait for the Electric SQL automations collection to hydrate before rendering the body. Without this gate, the empty-state placeholder flashes for a frame or two before the real rows arrive.
📝 WalkthroughWalkthroughThe automations page component now checks whether the query is ready before rendering, preventing the empty state from displaying during initial data loading. This prevents a brief flash of an empty interface. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR fixes an empty-state flicker on the Automations page by gating the page body on the Confidence Score: 5/5Safe to merge — the two-line change correctly gates rendering on the established All findings are P2 (no loading indicator is a UX polish suggestion, not a correctness issue). The fix is minimal, follows existing conventions ( No files require special attention.
|
| Filename | Overview |
|---|---|
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx | Adds isReady guard to prevent AutomationsEmptyState from flashing before data hydrates; renders null while loading with no loading indicator shown to the user. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[AutomationsPage renders] --> B{automationsReady?}
B -- false --> C[render null\nblank content area]
B -- true --> D{automations.length === 0?}
D -- yes --> E[AutomationsEmptyState]
D -- no --> F{visible.length === 0?}
F -- yes --> G[Scope-specific empty message]
F -- no --> H[Automations Table]
Prompt To Fix All With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
Line: 231
Comment:
**No loading indicator while waiting for `isReady`**
While `!automationsReady`, the content area renders `null`, leaving the `div.flex-1` visually blank. The flicker fix is correct, but users on slower syncs will see an empty grey region rather than any loading feedback. Consider a skeleton or spinner to make the loading state explicit:
```suggestion
{!automationsReady ? (
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
Loading…
</div>
) : automations.length === 0 ? (
```
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix automation list flicker on initial l..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| <div className="flex-1 overflow-y-auto px-8 py-6"> | ||
| {automations.length === 0 ? ( | ||
| {!automationsReady ? null : automations.length === 0 ? ( |
There was a problem hiding this comment.
isReady
While !automationsReady, the content area renders null, leaving the div.flex-1 visually blank. The flicker fix is correct, but users on slower syncs will see an empty grey region rather than any loading feedback. Consider a skeleton or spinner to make the loading state explicit:
| {!automationsReady ? null : automations.length === 0 ? ( | |
| {!automationsReady ? ( | |
| <div className="flex items-center justify-center h-full text-muted-foreground text-sm"> | |
| Loading… | |
| </div> | |
| ) : automations.length === 0 ? ( |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
Line: 231
Comment:
**No loading indicator while waiting for `isReady`**
While `!automationsReady`, the content area renders `null`, leaving the `div.flex-1` visually blank. The flicker fix is correct, but users on slower syncs will see an empty grey region rather than any loading feedback. Consider a skeleton or spinner to make the loading state explicit:
```suggestion
{!automationsReady ? (
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
Loading…
</div>
) : automations.length === 0 ? (
```
How can I resolve this? If you propose a fix, please make it concise.![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx (1)
230-231: Consider a lightweight loading placeholder instead ofnull.Rendering
nulluntil the live query is ready fixes the empty-state flicker, but it leaves the body area blank during the (typically brief) hydration window. If hydration is ever slow (cold start, large collection), users will see an empty header with no feedback. A subtle skeleton or spinner inside the scroll container would preserve the no-flicker behavior while signaling that content is loading.♻️ Optional sketch
- {!automationsReady ? null : automations.length === 0 ? ( + {!automationsReady ? ( + <div className="flex h-full items-center justify-center text-sm text-muted-foreground"> + {/* or a skeleton matching the table layout */} + </div> + ) : automations.length === 0 ? ( <AutomationsEmptyState onSelectTemplate={handleSelectTemplate} />Feel free to ignore if hydration is reliably fast enough that a placeholder would itself flash.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx` around lines 230 - 231, The body container currently returns null while waiting for the live query (when !automationsReady) which leaves the scroll area blank; replace that null with a lightweight placeholder (e.g., a subtle spinner or skeleton component) inside the same div (the element with className "flex-1 overflow-y-auto px-8 py-6") so the header stays stable but users see loading feedback; update the page component's render conditional around automationsReady/automations to render a small LoadingSkeleton or Spinner component while automationsReady is false, keeping the existing automations.length === 0 handling unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx`:
- Around line 230-231: The body container currently returns null while waiting
for the live query (when !automationsReady) which leaves the scroll area blank;
replace that null with a lightweight placeholder (e.g., a subtle spinner or
skeleton component) inside the same div (the element with className "flex-1
overflow-y-auto px-8 py-6") so the header stays stable but users see loading
feedback; update the page component's render conditional around
automationsReady/automations to render a small LoadingSkeleton or Spinner
component while automationsReady is false, keeping the existing
automations.length === 0 handling unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 755ecdb9-d784-4479-b6f1-84c19e02502d
📒 Files selected for processing (1)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
1 participant
Summary
isReadyso the empty-state placeholder doesn't flash for a frame or two before rows hydrate.Test plan
AutomationsEmptyStateflash before the table renders.Summary by cubic
Fixes initial flicker on the Automations page by gating rendering on the Electric SQL automations collection’s
isReady. The empty state no longer flashes before data hydrates; it only appears when there are no automations.Written for commit 3e300bf. Summary will update on new commits.
Summary by CodeRabbit