Skip to content

Commit d7921a8

Browse files
committed
Make the DOM update a little smoother, only update changed elements
1 parent a742186 commit d7921a8

File tree

6 files changed

+447
-12
lines changed

6 files changed

+447
-12
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Adds live auto-refresh capability to the SilverStripe Queued Jobs admin panel.
66

77
- Play/pause toggle button positioned next to the filter button
88
- Auto-refresh every 5 seconds without full page reload
9+
- Minimal DOM updates using intelligent diffing (only changed cells are updated, no false positives from action buttons)
910
- Subtle refresh indicator in the button icon (no intrusive popups)
1011
- Preserves scroll position and focus state
1112
- Smart pausing (10 seconds) on user interaction

client/dist/queuedjobs-admin.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,19 @@
148148
max-width: none;
149149
}
150150
}
151+
152+
/* ==========================================================================
153+
Live Refresh Optimizations
154+
========================================================================== */
155+
156+
/* Optimize table for live updates */
157+
.grid-field__table {
158+
will-change: contents;
159+
}
160+
161+
/* Disable transitions during live refresh updates to prevent flicker */
162+
.queuedjobs-live-updating,
163+
.queuedjobs-live-updating * {
164+
transition: none !important;
165+
animation: none !important;
166+
}

client/dist/queuedjobs-admin.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

client/src/queuedjobs-admin.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,19 @@
148148
max-width: none;
149149
}
150150
}
151+
152+
/* ==========================================================================
153+
Live Refresh Optimizations
154+
========================================================================== */
155+
156+
/* Optimize table for live updates */
157+
.grid-field__table {
158+
will-change: contents;
159+
}
160+
161+
/* Disable transitions during live refresh updates to prevent flicker */
162+
.queuedjobs-live-updating,
163+
.queuedjobs-live-updating * {
164+
transition: none !important;
165+
animation: none !important;
166+
}

0 commit comments

Comments
 (0)