# Model Loading Panel

Model Loading Panel [#model-loading-panel]

The **Model Loading Panel** is the richer, blocking sibling of the Model Downloader: a full-height "waiting for model" splash that combines model metadata (size, context length, category, a cached-vs-downloading badge) with a progress bar and a two-path help message (first-download vs cache-load). It composes the lower-level `DownloadProgress` and binds to `useModelLoad` (`progressValue`, `cached`, `status`).

Preview [#preview]

```tsx
'use client';

import { useEffect, useState } from 'react';

import { ModelLoadingPanel } from '@/components/model-loading-panel';

/**
 * Demo for ModelLoadingPanel. Animates a simulated first-time download splash.
 * No real model is downloaded here.
 */
export default function ModelLoadingPanelDemo() {
  const [fraction, setFraction] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setFraction((f) => (f >= 1 ? 0 : Math.min(1, f + 0.03)));
    }, 200);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="w-full max-w-md">
      <ModelLoadingPanel
        name="Llama 3.2 1B Instruct"
        size="1.2 GB"
        contextLength={8192}
        category="Chat"
        progress={fraction}
      />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/model-loading-panel
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the load state + metadata you pass — works with any backend. Recommended producer: `useModelLoad` (drive the load) / `useModelStatus` (read-only view of the same lifecycle) from `@localmode/react` (on-device, optional).

* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Registry dependencies [#registry-dependencies]

* `@localmode/ui/local-first/model-downloader` — composes `DownloadProgress`

Files installed [#files-installed]

* `model-loading-panel.tsx` — the `ModelLoadingPanel` component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ModelLoadingPanel**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | — | **Required.** Model display name. |
| `size` | `string` | — | Human-readable size. |
| `contextLength` | `number` | — | Context window in tokens. |
| `category` | `string` | — | Category / family label. |
| `progress` | `object \| number` | — | **Required.** Progress value (0–1 fraction or {@link DownloadProgressValue}). |
| `cached` | `boolean` | — | Whether the model is loading from cache rather than downloading fresh. |

Examples [#examples]

Blocking load state [#blocking-load-state]

```tsx
import { useModelLoad } from '@localmode/react';
import { webllm, isModelCached } from '@localmode/webllm';
import { ModelLoadingPanel } from '@/components/model-loading-panel';

export function Gate({ children }) {
  const { status, progressValue } = useModelLoad({
    key: 'Llama-3.2-1B-Instruct-q4f16_1-MLC',
    create: (onProgress) =>
      webllm.languageModel('Llama-3.2-1B-Instruct-q4f16_1-MLC', { onProgress }),
    isCached: () => isModelCached('Llama-3.2-1B-Instruct-q4f16_1-MLC'),
    autoLoad: true,
  });

  if (status !== 'ready') {
    return <ModelLoadingPanel name="Llama 3.2 1B" size="1.2 GB" progress={progressValue} />;
  }
  return children;
}
```

`progressValue` (`{ loaded?, total?, percent, cached? }`, `percent` 0–1) drops straight into the panel's `progress` prop, and its `cached` flag (from the `isCached` probe) flips the help copy between the first-download and cache-load paths.

Customization [#customization]

The help copy switches on the `cached` flag (or `progress.cached` — set automatically when you pass `useModelLoad`'s `progressValue`). It reuses `DownloadProgress` from the Model Downloader item, which the CLI installs as a registry dependency. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.