sneak/upaas
1
0
Fork 0
Code Issues 21 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix build logs auto-scroll with double RAF and change detection

Browse Source 
Use double requestAnimationFrame to ensure DOM has fully reflowed before
scrolling, and only scroll when log content actually changes.
This commit is contained in:
Jeffrey Paul 2026-01-08 10:31:19 -08:00
parent ee4afbde80
commit d4eae284b5
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/app.js
View File

@ -61,9 +61,11 @@ document.addEventListener("alpine:init", () => {
*/ */
scrollToBottom(el) { scrollToBottom(el) {
if (el) { if (el) {
// Use requestAnimationFrame for smoother scrolling after DOM update // Use double RAF to ensure DOM has fully updated and reflowed
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.scrollTop = el.scrollHeight; requestAnimationFrame(() => {
el.scrollTop = el.scrollHeight;
});
}); });
} }
}, },
@ -329,13 +331,17 @@ document.addEventListener("alpine:init", () => {
`/apps/${this.appId}/deployments/${this.deploymentId}/logs`, `/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
); );
const data = await res.json(); const data = await res.json();
this.logs = data.logs || "No logs available"; const newLogs = data.logs || "No logs available";
const logsChanged = newLogs !== this.logs;
this.logs = newLogs;
this.status = data.status; this.status = data.status;
// Scroll to bottom after update // Scroll to bottom only when content changes
this.$nextTick(() => { if (logsChanged) {
Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper); this.$nextTick(() => {
}); Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
});
}
// Stop polling if deployment is done // Stop polling if deployment is done
if (!Alpine.store("utils").isDeploying(data.status)) { if (!Alpine.store("utils").isDeploying(data.status)) {