Skip to main content
Kaleidoscope

GhostBlock

AK
MN

A component used to build out a loading state for other components or layouts

Default

By default, the GhostBlock is a fixed-height fluid-width component that fills the container it's in on the horizontal axis:

Editable example
<div style={{width: "300px"}}>
  <GhostBlock />
</div>

In a layout

You can use multiple GhostBlock instances to create a layout or component that looks similar to an existing component without the content:

Editable example
<Card style={{padding: "var(--space-m)", display: "flex", gap: "var(--space-xl)"}}>
  <div style={{width: "75%", display: "flex", flexDirection: "column", gap: "var(--space-s)"}}>
    <GhostBlock />
    <GhostBlock />
  </div>
  <div style={{width: "25%"}}>
    <GhostBlock />
  </div>
</Card>

Best practices

  1. Use a GhostBlock when the loaded content will approximately fill the same container as the GhostBlock's layout, to reduce jank and vertical flicker; for other cases (e.g. where vertical height or layout is unpredictable) use a Spinner.