Diamond Loader

Examples

Overview

DiamondLoader is the loading indicator for the product: a running chat, a generating row in the sidebar or on Home, a page waiting on data. It replaces the pixel RogoLogoMatrix and the gradient RogoMatrixLoader, so every loading state reads as one mark.

It is a DiamondGrid playing a fixed orbit. Every diamond is fully lit or fully resting, every grid takes 1.2 s for a lap, and the animation runs in CSS on the compositor. Under reduced motion it holds still.

The grid follows the size: 3 × 3 below 16px, 4 × 4 below 20px, 5 × 5 from there. Fewer diamonds at small sizes keep each one crisp. Set columns only when a surface needs a specific grid.

Usage

import { DiamondLoader } from "@rogo-technologies/ui/diamond-loader";

<DiamondLoader size="xs" label="Generating" />;

API

Tones

• brand is the default: brand-green diamonds, as on the Rogo mark.
• muted uses the tertiary text colour. Use it beside a brand or destructive button, where brand green would clash. The Rogo Notes waveform uses the same colours.
• inverted is for a dark or brand-filled chip.

Guidelines

• Use it wherever something is loading or an agent is working. Don't add another spinner.
• Pick the preset that matches the row: xs in sidebar and list rows, sm beside body text, md under a streaming answer, lg for a page or panel waiting on data.
• Name what is happening in label when the surface has no visible text that says so.
• The timing and the orbit live in diamond-loader.tsx. Change them there and every surface follows.