Analyzing image

AnalyzingImage is a scanning image placeholder for vision, OCR, upload review, and image-understanding flows. It pairs especially well with shimmer text components when the surrounding copy should feel like an active analysis state.

import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

export function AnalyzingImageDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/analyzing-image
Copy

Usage

Copyimport { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

Copy<AnalyzingImage className="size-16" />

Customization

AnalyzingImage scales from size-* utilities and inherits currentColor. The wipe mask defaults to var(--background); on filled surfaces, set --loading-ui-analyzing-image-background to the surface color so the scan feels native to the container.

Size

Use compact sizes for badges and buttons, and larger sizes for empty states or image-analysis panels.

import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

export function AnalyzingImageSize() {

Color

Color comes from currentColor, so text utilities or inherited foreground colors are enough.

import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

export function AnalyzingImageColor() {

Examples

These examples use the component where an image is being read, described, or processed. Pairing it with shimmer text keeps the visual and copy in the same analysis language.

Shimmer Text

Use TextShimmer beside the icon when the label itself should feel active.

import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";
import { TextShimmer } from "@/components/loading-ui/text-shimmer";

Button

Buttons can use the icon for pending vision actions. Filled variants set the mask background to match the button surface.

import { Button } from "@/components/ui/button";
import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

Badge

Badges work well for compact OCR, vision, and analysis labels.

import { Badge } from "@/components/ui/badge";
import { AnalyzingImage } from "@/components/loading-ui/analyzing-image";

Empty

Empty states can combine the icon with shimmer text while an uploaded image is still being inspected.

import { Button } from "@/components/ui/button";
import {
  Empty,