---
url: https://lit-ui-router.dev/reference/lit-ui-router/core/viewRendered.md
---
[lit-ui-router](../index.md) / viewRendered

# Function: viewRendered()

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

Defined in: [packages/lit-ui-router/src/view-rendered.ts:125](https://github.com/simshanith/lit-ui-router/blob/740888c2b2ba358c4dfa52a122e927df6a604b12/packages/lit-ui-router/src/view-rendered.ts#L125)

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](../components/UiView.md#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. A transition started in its place, such as a
redirect from an `onError` hook, is not followed; await that transition
with its own call.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `router` | [`UIRouter`](https://ui-router.github.io/core/docs/latest/classes/_router_.uirouter.html) | The router the `<ui-view>`s registered with. |
| `transition?` | | [`Transition`](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) | `undefined` | The transition to wait for; defaults to the one in flight, else the last successful one. |

## Returns

`Promise`<`void`>

## Examples

**Move focus once the new view is in the DOM**

```ts
import { viewRendered, type UIRouterLit } from 'lit-ui-router';

declare const router: UIRouterLit;

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

**Show an error view, and wait for it to render**

```ts
import { RejectType } from '@uirouter/core';
import { viewRendered, type UIRouterLit } from 'lit-ui-router';

declare const router: UIRouterLit;

router.transitionService.onError({}, async (trans) => {
  // Skip superseded transitions, and stop if the error state itself fails.
  if (trans.error()?.type !== RejectType.ERROR) return;
  if (trans.to().name === 'error') return;
  const redirect = router.stateService.go('error');
  await viewRendered(router, redirect.transition);
  document.querySelector<HTMLElement>('main h1')?.focus();
});
```

**Release a View Transition**

```ts
import { viewRendered, type UIRouterLit } from 'lit-ui-router';

declare const router: UIRouterLit;

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;
});
```