fix(desktop): prevent automations empty-state flicker on load#3790
fix(desktop): prevent automations empty-state flicker on load#3790saddlepaddle wants to merge 1 commit into
Conversation
📝 WalkthroughWalkthroughThe automations page component now tracks query loading state, destructuring Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Possibly related PRs
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)
⚔️ Resolve merge conflicts
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 a UX flicker on the Automations page where Confidence Score: 5/5Safe to merge — the fix is minimal, correct, and directly addresses the described flicker. Only a P2 UX suggestion (no loading skeleton) remains. The core logic is sound: No files require special attention.
|
| Filename | Overview |
|---|---|
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx | Extracts isLoading from the automations useLiveQuery call and gates the empty-state render behind it, preventing the false-empty-state flash on initial load. Logic is correct; isLoading is a valid return value from @tanstack/react-db's useLiveQuery. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[AutomationsPage mounts] --> B[useLiveQuery fires]
B --> C{automationsLoading?}
C -- true --> D[Render null\nbody is blank]
C -- false --> E{automations.length === 0?}
E -- yes --> F[Render AutomationsEmptyState]
E -- no --> G[Render ToggleGroup + Table]
G --> H{visible.length === 0?}
H -- yes --> I[Render scoped empty text]
H -- no --> J[Render rows]
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: 232
Comment:
**No loading indicator while fetching**
While rendering `null` during load prevents the empty-state flicker, it leaves the content area completely blank until the query settles. A skeleton or spinner would give users a signal that data is on its way, especially on slower machines or large datasets. Consider replacing `null` with a lightweight placeholder:
```suggestion
{automationsLoading ? (
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
Loading automations…
</div>
) : automations.length === 0 ? (
```
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix(desktop): hide automations body unti..." | 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 ? ( | ||
| {automationsLoading ? null : automations.length === 0 ? ( |
There was a problem hiding this comment.
While rendering null during load prevents the empty-state flicker, it leaves the content area completely blank until the query settles. A skeleton or spinner would give users a signal that data is on its way, especially on slower machines or large datasets. Consider replacing null with a lightweight placeholder:
| {automationsLoading ? null : automations.length === 0 ? ( | |
| {automationsLoading ? ( | |
| <div className="flex h-32 items-center justify-center text-sm text-muted-foreground"> | |
| Loading automations… | |
| </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: 232
Comment:
**No loading indicator while fetching**
While rendering `null` during load prevents the empty-state flicker, it leaves the content area completely blank until the query settles. A skeleton or spinner would give users a signal that data is on its way, especially on slower machines or large datasets. Consider replacing `null` with a lightweight placeholder:
```suggestion
{automationsLoading ? (
<div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
Loading automations…
</div>
) : automations.length === 0 ? (
```
How can I resolve this? If you propose a fix, please make it concise.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!
![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)
232-232: Consider adding a lightweight loading placeholder instead ofnullto preserve layout stability.Returning
nullwhileautomationsLoadingis true eliminates the empty-state flash, but it also leaves the body blank on slow initial loads, which can look like a broken page on first paint. A subtle skeleton (or even a min-height container) would maintain layout stability without reintroducing flicker.The concern about the table disappearing during refetches is not applicable here. The
useLiveQueryhook'sisLoadingistrueexclusively during the initial collection sync and transitions tofalseonce ready. During live updates and refetches,isLoadingremainsfalse, so the UI updates reactively without the loading state triggering again.♻️ Example: add a skeleton placeholder for initial load
- {automationsLoading ? null : automations.length === 0 ? ( + {automationsLoading ? ( + <div className="rounded-md border border-dashed px-8 py-12 text-center text-sm text-muted-foreground"> + Loading automations… + </div> + ) : automations.length === 0 ? ( <AutomationsEmptyState onSelectTemplate={handleSelectTemplate} />🤖 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` at line 232, The current render branch returns null while automationsLoading is true which causes a blank body on initial load; instead, update the conditional rendering in page.tsx (the expression that checks automationsLoading and automations.length) to render a lightweight placeholder (e.g., a skeleton row set or a container with a min-height and subtle shimmer) when automationsLoading is true so layout is preserved, while keeping the existing empty-state UI when automationsLoading is false and automations.length === 0; target the automationsLoading flag and the JSX branch where automations are rendered to swap null for the placeholder component/markup.
🤖 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`:
- Line 232: The current render branch returns null while automationsLoading is
true which causes a blank body on initial load; instead, update the conditional
rendering in page.tsx (the expression that checks automationsLoading and
automations.length) to render a lightweight placeholder (e.g., a skeleton row
set or a container with a min-height and subtle shimmer) when automationsLoading
is true so layout is preserved, while keeping the existing empty-state UI when
automationsLoading is false and automations.length === 0; target the
automationsLoading flag and the JSX branch where automations are rendered to
swap null for the placeholder component/markup.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 60c766c9-b0ff-45a0-b8e0-0d9e0e463395
📒 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}
1 participant
Summary
AutomationsEmptyStatewheneverautomations.length === 0, including the brief window before the live query had results — causing the empty state to flash before the table populated.isLoadingfromuseLiveQueryand renders nothing in the body while loading; the header (title + "New automation") still renders immediately.Test plan
Summary by cubic
Prevents the Automations page empty-state from flashing by hiding the body until
useLiveQueryfinishes loading. The header renders immediately; the empty state only appears after load when there are no automations.Written for commit cea0ae1. Summary will update on new commits.
Summary by CodeRabbit