Fix build logs auto-scroll with double RAF and change detection
Use double requestAnimationFrame to ensure DOM has fully reflowed before scrolling, and only scroll when log content actually changes.
This commit is contained in:
parent
ee4afbde80
commit
d4eae284b5
@ -61,10 +61,12 @@ 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(() => {
|
requestAnimationFrame(() => {
|
||||||
el.scrollTop = el.scrollHeight;
|
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
|
||||||
|
if (logsChanged) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
|
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)) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user