---
url: https://lit-ui-router.dev/api/reference/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:100](https://github.com/simshanith/lit-ui-router/blob/1cd954559604dabdcb4d0a419ac42b07b38f0fba/packages/lit-ui-router/src/view-rendered.ts#L100)

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.

## 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 last successful one. |

## Returns

`Promise`<`void`>

## Examples

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

```ts
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**

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