Debounce page refreshes triggered via Turbo streams

Fix Turbo 8 refresh debounce in frontend #1093

src/core/session.js

@@ -12,7 +12,7 @@ import { ScrollObserver } from "../observers/scroll_observer"
 import { StreamMessage } from "./streams/stream_message"
 import { StreamMessageRenderer } from "./streams/stream_message_renderer"
 import { StreamObserver } from "../observers/stream_observer"
-import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markAsBusy } from "../util"
+import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markAsBusy, debounce } from "../util"
 import { PageView } from "./drive/page_view"
 import { FrameElement } from "../elements/frame_element"
 import { Preloader } from "./drive/preloader"
@@ -44,6 +44,7 @@ export class Session {
 
   constructor(recentRequests) {
     this.recentRequests = recentRequests
+    this.refresh = debounce(this.refresh.bind(this), 150)
   }
 
   start() {

src/tests/functional/page_refresh_stream_action_tests.js

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test"
 import { assert } from "chai"
-import { nextBeat } from "../helpers/page"
+import { readEventLogs, sleep } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh_stream_action.html")
@@ -9,24 +9,24 @@ test.beforeEach(async ({ page }) => {
 test("test refreshing the page", async ({ page }) => {
   assert.match(await textContent(page), /Hello/)
 
-  await page.locator("#content").evaluate((content)=>content.innerHTML = "")
+  await page.locator("#content").evaluate((content) => content.innerHTML = "")
   assert.notMatch(await textContent(page), /Hello/)
 
   await page.click("#refresh button")
-  await nextBeat()
+  await sleep(250)
 
   assert.match(await textContent(page), /Hello/)
 })
 
 test("don't refresh the page on self-originated request ids", async ({ page }) => {
   assert.match(await textContent(page), /Hello/)
 
-  await page.locator("#content").evaluate((content)=>content.innerHTML = "")
-  page.evaluate(()=> { window.Turbo.session.recentRequests.add("123") })
+  await page.locator("#content").evaluate((content) => content.innerHTML = "")
+  page.evaluate(() => { window.Turbo.session.recentRequests.add("123") })
 
-  await page.locator("#request-id").evaluate((input)=>input.value = "123")
+  await page.locator("#request-id").evaluate((input) => input.value = "123")
   await page.click("#refresh button")
-  await nextBeat()
+  await sleep(250)
 
   assert.notMatch(await textContent(page), /Hello/)
 })
@@ -42,6 +42,16 @@ test("fetch injects a Turbo-Request-Id with a UID generated automatically", asyn
   }
 })
 
+test("debounce stream page refreshes", async ({ page }) => {
+  await page.click("#refresh button")
+  await page.click("#refresh button")
+  await sleep(250)
+
+  const eventLogs = await readEventLogs(page)
+  const requestLogs = eventLogs.filter(([name]) => name == "turbo:visit")
+  assert.equal(requestLogs.length, 1)
+})
+
 async function textContent(page) {
   const messages = await page.locator("#content")
   return await messages.textContent()

src/tests/unit/stream_element_tests.js

@@ -2,7 +2,7 @@ import { StreamElement } from "../../elements"
 import { nextAnimationFrame } from "../../util"
 import { DOMTestCase } from "../helpers/dom_test_case"
 import { assert } from "@open-wc/testing"
-import { nextBeat } from "../helpers/page"
+import { sleep } from "../helpers/page"
 import * as Turbo from "../../index"
 
 function createStreamElement(action, target, templateElement) {
@@ -177,7 +177,7 @@ test("test action=refresh", async () => {
   const element = createStreamElement("refresh")
   subject.append(element)
 
-  await nextBeat()
+  await sleep(250)
 
   assert.notOk(document.body.hasAttribute("data-modified"))
 })
@@ -192,7 +192,7 @@ test("test action=refresh discarded when matching request id", async () => {
   element.setAttribute("request-id", "123")
   subject.append(element)
 
-  await nextBeat()
+  await sleep(250)
 
   assert.ok(document.body.hasAttribute("data-modified"))
 })

src/util.js

@@ -215,3 +215,13 @@ export async function around(callback, reader) {
 
   return [before, after]
 }
+
+export function debounce(fn, delay) {
+  let timeoutId = null
+
+  return (...args) => {
+    const callback = () => fn.apply(this, args)
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(callback, delay)
+  }
+}