# Loading

`WrappedPlayerLoading` is the player before its video exists. It draws the same frame at the same size, with a beam crossing a blank year and a line of text that changes, and the transport under it at rest. Use it while the year's numbers are on their way, so nothing on the page moves when they arrive.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/player/loading/

## Usage

`waiting-for-the-year.tsx`

```tsx
import type { CSSProperties } from "react";

import type { LoadingSubject, WrappedConfig } from "@react-wrapped/core";
import { WrappedPlayerLoading } from "@react-wrapped/player";

const ROOM: CSSProperties = { display: "grid", height: 560 };

// What the address already says about the year: whose it is. The numbers are still on their way.
const subject: LoadingSubject = { handle: "ada", caption: "Orbit Wrapped" };
// More than one line take turns, a new one every 2.6 seconds.
const lines = ["Reading your year.", "Counting the busy days.", "Looking for your longest streak."];

export function WaitingForTheYear({ config }: { config: WrappedConfig }) {
  return (
    <div style={ROOM}>
      <WrappedPlayerLoading subject={subject} lines={lines} config={config} />
    </div>
  );
}
```

Render it in the same place and with the same `className` as the player that will replace it. The frame takes its format and palette from the config, so the swap is the first scene starting inside a frame that is already there.

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `subject` | `LoadingSubject` | What is known before the year is: usually a handle and a caption. |
| `lines` | `readonly string[]` | What to read meanwhile. More than one take turns, 2.6 seconds each. |
| `config` | `WrappedConfig` | The frame takes the format and palette the video will have. |
| `className?` | `string` | A class for the root, the same one you give the player. |
| `classNames?` | `SlotClassNames<WrappedPlayerSlot \| TimelineSlot>` | The same object you give the player, so the frame and the controls look the same before the year as after. See [styling](https://bettertyped.github.io/react-wrapped/docs/guides/styling/). |

### The loading subject

| Key | Type | What it is |
| --- | --- | --- |
| `handle?` | `string` | Shown in the corner the way the video shows it. Leave it out when the link does not say. |
| `caption` | `string` | The small line under the handle. |
| `avatarUrl?` | `string` | A picture that can be had before the year. It fades in over the initials. |
| `mark?` | `string \| readonly string[]` | The corner mark, as on the video. |
| `brand?` | `string` | The quiet line in the bottom left, as on the video. |

## With WrappedView

`WrappedView` takes the wait as a prop. Pass `loading` in place of the subject, seed and scenes and it is the loading page. Pass the year once you have it and the same component is the video, so the layout is never rebuilt.

```tsx
import { WrappedView, type WrappedConfig, type WrappedCut } from "@react-wrapped/kit";

const WAIT = {
  subject: { handle: "ada", caption: "Orbit Wrapped" },
  lines: ["Reading your year.", "Counting the busy days."],
};

export function YearPage({
  cut,
  config,
  onConfigChange,
}: {
  /** Null until the year has loaded. */
  cut: (WrappedCut & { seed: string }) | null;
  config: WrappedConfig;
  onConfigChange: (next: WrappedConfig) => void;
}) {
  if (!cut) return <WrappedView loading={WAIT} config={config} onConfigChange={onConfigChange} />;
  return (
    <WrappedView
      subject={cut.subject}
      seed={cut.seed}
      scenes={cut.scenes}
      config={config}
      onConfigChange={onConfigChange}
    />
  );
}
```

## Only the frame

`LoadingStage` from `@react-wrapped/core` is the frame alone, with no transport, for a layout of your own. It is drawn at full size and scaled with `scale`, like the stage itself, so give it a box of the scaled size with `position: relative` and `overflow: hidden`.

| Prop | Type | What it does |
| --- | --- | --- |
| `subject` | `LoadingSubject` | As above. |
| `lines` | `readonly string[]` | As above. |
| `config` | `WrappedConfig` | As above. |
| `scale` | `number` | How much the full-size frame is scaled down: the width you draw it at divided by the format's width. |

## Motion

The beam crosses the year and back in under four seconds, and each week lights as it passes and fades behind it. The loop runs on the Web Animations API and costs the page nothing while it waits. With reduced motion switched on in the system, the year stands still and only the lines change.

## Related

- [WrappedPlayer](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/)
- [Player](https://bettertyped.github.io/react-wrapped/docs/player/)
- [Server rendering](https://bettertyped.github.io/react-wrapped/docs/guides/server-rendering/)
- [Scanner](https://bettertyped.github.io/react-wrapped/docs/scanner/)

Source: https://bettertyped.github.io/react-wrapped/docs/player/loading/