replace nextAnimationFrame with nextRepaint to render stream element …

…updates (#1042)

* replace nextAnimationFrame by nextMicroTask

* fix linter warnings

* use nextEventLoopTick

* use nextMicroTask in stream element

* event loop tick

* useNextAnimationFrame setting on session

* revert to initial

* conditioned nexTAnimationFrame

* use nextEventTick on stream_message_renderer only

* update stream element tests

* nextRepaint util function with browsert tab awareness

* integrate nextRepaint into stream element test

* await on nextRepaint on stream element

* restore session cache & nextRepaint returns sync

* restore nextAnimationFrame on strea element test

src/elements/stream_element.js

@@ -1,5 +1,5 @@
 import { StreamActions } from "../core/streams/stream_actions"
-import { nextAnimationFrame } from "../util"
+import { nextRepaint } from "../util"
 
 // <turbo-stream action=replace target=id><template>...
 
@@ -43,7 +43,7 @@ export class StreamElement extends HTMLElement {
       const event = this.beforeRenderEvent
 
       if (this.dispatchEvent(event)) {
-        await nextAnimationFrame()
+        await nextRepaint()
         await event.detail.render(this)
       }
     })())

src/util.js

@@ -43,6 +43,14 @@ export function dispatch(eventName, { target, cancelable, detail } = {}) {
   return event
 }
 
+export function nextRepaint() {
+  if (document.visibilityState === "hidden") {
+    return nextEventLoopTick()
+  } else {
+    return nextAnimationFrame()
+  }
+}
+
 export function nextAnimationFrame() {
   return new Promise((resolve) => requestAnimationFrame(() => resolve()))
 }