lit-ui-router / viewRendered

Function: viewRendered()

function viewRendered(router, transition?): Promise<void>;

Defined in: packages/lit-ui-router/src/view-rendered.ts:100

Resolves once the routed views have rendered transition.

onSuccess hooks and transition.promise settle when the transition succeeded; each <ui-view> swaps its component in a Lit update after that, and the element it rendered updates after the view does. This waits for every <ui-view> registered with router, and its routedElement, to complete its update, then repeats until none has an update queued: that covers the views those updates connected, and the view's update that retires the element a swap replaced, so the outgoing element is gone when this resolves.

It resolves on updateComplete, never on an animation frame, so it is safe to await while a View Transition snapshot is held.

A transition that fails or is superseded renders nothing of its own: the promise resolves once the views have settled, and transition.promise still carries the outcome.

Parameters

Parameter	Type	Description
router	UIRouter	The router the <ui-view>s registered with.
transition?	| Transition | undefined	The transition to wait for; defaults to the last successful one.

Returns

Promise<void>

Examples

Move focus once the new view is in the DOM

import { viewRendered } from 'lit-ui-router';

router.transitionService.onSuccess({}, async (trans) => {
  await viewRendered(router, trans);
  document.querySelector<HTMLElement>('main h1')?.focus();
});

Release a View Transition

router.transitionService.onStart({}, (trans) => {
  if (!document.startViewTransition) return;
  let captured!: () => void;
  const oldViewCaptured = new Promise<void>((resolve) => (captured = resolve));
  document.startViewTransition(() => {
    captured();
    return viewRendered(router, trans);
  });
  return oldViewCaptured;
});