Batching updates with View Transition API

readme.md

Usage

import { enqueueTransition } from './transition'


// fetch or something getting external content
const myHtmlString = '<section>...</section>'
const range = document.createRange();
const documentFragment = range.createContextualFragment(myHtmlString);

// can be ran multiple times in isolation, view transitions will be batched or ran in sequence
enqueueTransition(() => mySection.replaceWith(myHtmlString))

transition.ts

import debounce from 'lodash.debounce'

type TransitionCallback = () => Promise<void>

const transitionQueue: TransitionCallback[] = []
let isRunning = false

const runTransitions = async () => {
  if (isRunning || transitionQueue.length === 0) return

  isRunning = true
  const batch = [...transitionQueue]
  transitionQueue.length = 0

  try {
    if (document.startViewTransition) {
      document.startViewTransition(() => Promise.all(batch.map((callback) => callback())).then(() => {}))
    } else {
      await Promise.all(batch.map((callback) => callback()))
    }
  } catch (error) {
    console.error('Transition error:', error)
  } finally {
    isRunning = false
  }
}

const debouncedRunTransitions = debounce(runTransitions, 10)

export const enqueueTransition = (callback: TransitionCallback) => {
  transitionQueue.push(callback)
  debouncedRunTransitions()
}