# Glimmer

Glimmer is a foundational component that is used to build Skeleton (*coming
soon*) or other components that invoke loading such as an image waiting to load
on [FormatFile](../FormatFile/FormatFile.md).

## Colors

Glimmers adapts to the background you put it in. If you have a grey background,
the `Glimmer` will automatically darken itself so it's still noticeable.

```tsx
import React from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Text } from "@jobber/components/Text";

export function GlimmerBasicExample() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--background",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--background
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--background--subtle)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--background--subtle
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--space-small)",
          padding: "var(--space-base)",
          backgroundColor: "var(--color-surface--reverse)",
        }}
      >
        <Text size="small" variation="subdued">
          On surface--reverse (toggle reverseTheme prop)
        </Text>
        <Glimmer shape="rectangle" size="base" timing="base" />
      </div>
    </div>
  );
}
```

If the Glimmer sits on a `reverse` background (dark in light mode, light in dark
mode), you can toggle the `reverseTheme` prop to switch the colors so it's still
noticeable.

```tsx
import React from "react";
import type { ComponentProps } from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Box } from "@jobber/components/Box";

export function GlimmerReverseThemeExample(
  props: Partial<ComponentProps<typeof Glimmer>>,
) {
  return (
    <Box background="surface--reverse" padding="base">
      <Glimmer reverseTheme {...props} />
    </Box>
  );
}
```

## Semantic blocks

A pre-made block can be used to indicate a certain component.

```tsx
import React from "react";
import { Glimmer } from "@jobber/components/Glimmer";
import { Tab, Tabs } from "@jobber/components/Tabs";

export function GlimmerSemanticBlocksExample() {
  return (
    <Tabs>
      <Tab label={"Glimmer.Header"}>
        <Glimmer.Header />
      </Tab>
      <Tab label={"Glimmer.Text"}>
        <Glimmer.Text />
      </Tab>
      <Tab label={"Glimmer.Button"}>
        <Glimmer.Button />
      </Tab>
    </Tabs>
  );
}
```


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `shape` | `"circle" | "rectangle" | "square"` | No | `rectangle` | Sets the size of the glimmer. |
| `size` | `"base" | "large" | "larger" | "largest" | "small"` | No | `base` | Sets the shape of the glimmer.  If you need a specific width, use the `width` prop. |
| `timing` | `GlimmerTimings` | No | `base` | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
| `width` | `number | `${number}%`` | No | — | Adjust the width of the glimmer in px or % values. |