Redesign widget empty state with animated demo table by karinakharchenko · Pull Request #1647 · rocket-admin/rocketadmin

karinakharchenko · 2026-03-04T14:07:53Z

Summary

Replace the old centered empty state on the UI Widgets page with a two-column layout
Left column: animated mini table demonstrating widget transformations (Boolean, Money, URL, Country) with staggered row-by-row animation loop
Right column: grid of 18 available widget types with icons and descriptions
Remove unused edit component imports (PasswordEdit, ImageEdit, CodeEdit, TextEdit, LongTextEdit, SelectEdit)

Test plan

Navigate to a table's widgets page with 0 widgets configured
Verify two-column layout displays correctly with animated demo table
Verify animation loops: rows appear one by one, reset, repeat
Verify "Create first widget" button works (adds a new widget)
Verify "Docs" link opens documentation in new tab
Verify dark theme looks correct
Verify Back/Save buttons still present at bottom

🤖 Generated with Claude Code

…table Replace the old centered empty state with a two-column design: left side shows an animated mini table demonstrating widget transformations (Boolean, Money, URL, Country) with staggered row animations, right side displays a grid of 18 available widget types. Remove unused edit component imports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAassistant · 2026-03-04T14:08:08Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

…ace font Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR redesigns the UI Widgets page empty state (when a table has zero configured widgets) into a two-column layout featuring an animated demo “mini table” and a widget-type overview grid, while removing unused edit component imports from the widgets page component.

Changes:

Replaces the old empty state with a two-column layout (animated demo on the left, widget grid on the right).
Adds a staggered, looping row-by-row animation for the demo table (with timer cleanup on destroy).
Removes unused record-edit component imports previously only used by the old empty-state examples.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts	Adds empty-state animation state/timers and removes unused edit component imports.
frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.html	Implements new empty-state layout with animated demo table + widget grid + updated CTAs.
frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css	Adds styling for new two-column empty-state layout, demo table, and widget grid.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T14:12:28Z

...nd/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts

 			this.widgets = res;
+			if (this.widgets.length === 0) {
+				this._startWidgetAnimation();
+			}


The empty-state animation is only started in getWidgets() when the initial fetch returns an empty array. If the user deletes the last widget (via delete dialog or “Clear All”), widgets becomes empty without re-running getWidgets(), so the demo animation will never start again. Consider starting/stopping the animation whenever widgets.length transitions to/from 0 (e.g., in updateWidgets success callback and after local mutations), rather than only on the initial fetch.

Copilot · 2026-03-04T14:12:29Z

...nd/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts

+	private _animationTimers: ReturnType<typeof setTimeout>[] = [];
+
+	private _startWidgetAnimation(): void {
+		this._clearAnimationTimers();
+		this._runAnimationCycle();
+	}
+
+	private _runAnimationCycle(): void {
+		for (let i = 0; i < 4; i++) {
+			this._animationTimers.push(
+				setTimeout(() => {
+					this.animatedRows[i] = true;
+				}, i * 600),
+			);
+		}
+
+		this._animationTimers.push(
+			setTimeout(() => {
+				this.animatedRows = [false, false, false, false];
+
+				this._animationTimers.push(
+					setTimeout(() => {
+						this._runAnimationCycle();
+					}, 800),
+				);
+			}, 3 * 600 + 2200),


Once started, the setTimeout loop continues running even after the user clicks “Create first widget” (empty state disappears but timers keep firing), which will keep triggering Angular change detection unnecessarily. Clear/stop the animation when widgets.length becomes non-zero (e.g., in addNewWidget() and in getWidgets() when res.length > 0), and consider resetting animatedRows back to all-false when (re)starting to ensure a consistent first frame.

Copilot · 2026-03-04T14:12:29Z

.../src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.html

-                        [disabled]="false">
-                    </app-edit-code>
+            <div class="empty-right">
+                <span class="widget-grid-label">Available widgets</span>


The “Available widgets” grid is hard-coded and omits several widget types that are actually supported (e.g., JSON, Markdown, Time/Timezone, File, DateTime, Readonly) per UIwidgets. This copy/UI can mislead users into thinking those widgets aren’t available; either render the list from the source-of-truth (with an icon/description map) or rename the label to indicate it’s a curated subset.

Suggested change

<span class="widget-grid-label">Available widgets</span>

<span class="widget-grid-label">Example widgets</span>

Copilot · 2026-03-04T14:12:29Z

...d/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css

+    grid-template-columns: repeat(6, auto);
+    gap: 10px;
 }



The widget grid uses grid-template-columns: repeat(6, auto) with a fixed 420px left column, which will force horizontal overflow/scrolling on narrower viewports. Add responsive rules (e.g., stack the columns under a breakpoint and/or use repeat(auto-fit, minmax(...))) so the empty state remains usable on smaller screens.

Suggested change

@media (max-width: 1024px) {

.widget-grid {

grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

}

}

Copilot · 2026-03-04T14:12:30Z

...nd/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts

 			this.widgets = res;
+			if (this.widgets.length === 0) {
+				this._startWidgetAnimation();
+			}


There are existing unit tests for this component, but the newly added empty-state animation behavior isn’t covered (e.g., starts when widgets load empty; stops when widgets become non-empty; restarts after deleting the last widget; timers cleared on destroy). Adding a few fakeAsync/tick-based tests would prevent regressions and catch timer leaks.

- scroll; - text contrast; - bottom bar, only back button; - light theme for demo table; - move empty state to separate component.

Copilot AI review requested due to automatic review settings March 4, 2026 14:07

Copilot started reviewing on behalf of karinakharchenko March 4, 2026 14:08 View session

Update demo table widget styles: white text for Money/Country, monosp…

0df3982

…ace font Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI reviewed Mar 4, 2026

View reviewed changes

lyubov-voloshko added 2 commits March 5, 2026 15:21

Merge branch 'main' into widget-empty-state

d9abfea

fixes:

0a43bc7

- scroll; - text contrast; - bottom bar, only back button; - light theme for demo table; - move empty state to separate component.

lyubov-voloshko merged commit 38a9749 into rocket-admin:main Mar 5, 2026
6 of 8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Redesign widget empty state with animated demo table#1647

Redesign widget empty state with animated demo table#1647
lyubov-voloshko merged 4 commits intorocket-admin:mainfrom
karinakharchenko:widget-empty-state

karinakharchenko commented Mar 4, 2026

Uh oh!

CLAassistant commented Mar 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<span class="widget-grid-label">Available widgets</span>
	<span class="widget-grid-label">Example widgets</span>

+@media (max-width: 1024px) {
+    .widget-grid {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    }
+}

Uh oh!

Conversation

karinakharchenko commented Mar 4, 2026

Summary

Test plan

Uh oh!

CLAassistant commented Mar 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants