Skip to main content
A cross-platform image loader with stunning gradient loading patterns, smooth animations, and graceful error handling. Available for both Web and React Native with platform-specific optimizations.

​
Installation

npx shadcn@latest add https://rigidui.com/r/image-loader.json

​
Usage

import { ImageLoader } from "@/components/image-loader"

export default function Gallery() {
  return (
    <ImageLoader
      src="https://example.com/image.jpg"
      alt="Description of the image"
      width={400}
      height={300}
    />
  )
}

​
Features

Beautiful Loading States

Dynamic gradient patterns with smooth animations provide visually appealing loading experiences.

Cross-Platform

Available for both Web and React Native with platform-specific optimizations and native rendering.

Optimized Performance

Lazy loading for web, native animations for React Native, and efficient pattern generation.

Responsive Design

Automatically adapts to different screen sizes and container dimensions on all platforms.

Error Handling

Graceful fallback states with customizable error components for failed image loads.

Smooth Animations

Native Animated API for React Native and CSS transitions for web ensure buttery smooth fade-ins.

​
API Reference

​
ImageLoader (Web)

​
src
string
required
The source URL of the image to load
​
alt
string
required
Alternative text for the image (required for accessibility)
​
className
string
Additional class names for styling
​
blurIntensity
string
default:"'blur(50px)'"
CSS blur filter intensity for the loading state
​
width
number | string
default:"400"
Width of the image container in pixels or CSS units
​
height
number | string
default:"300"
Height of the image container in pixels or CSS units
​
fallbackComponent
React.ReactNode
Custom component to display when image fails to load
​
onLoad
() => void
Callback function called when image successfully loads
​
onError
(error: Event) => void
Callback function called when image fails to load
​
loading
'lazy' | 'eager'
default:"'lazy'"
Native browser loading behavior for the image
​
objectFit
'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
default:"'cover'"
How the image should be resized to fit its container
​
customColors
ColorCombination[]
Custom color combinations for the loading pattern
type ColorCombination = {
  start: string
  middle?: string
  end: string
}
​
seed
number
Seed value for generating consistent loading patterns

​
ImageLoader (React Native)

​
src
string
required
The source URL of the image to load
​
alt
string
required
Alternative text for the image (required for accessibility)
​
className
string
NativeWind classes for styling
​
width
number
default:"400"
Width of the image container in pixels
​
height
number
default:"300"
Height of the image container in pixels
​
fallbackComponent
React.ReactNode
Custom component to display when image fails to load
​
onLoad
() => void
Callback function called when image successfully loads
​
onError
() => void
Callback function called when image fails to load
​
resizeMode
'cover' | 'contain' | 'stretch' | 'center'
default:"'cover'"
How the image should be resized to fit its container
​
customColors
ColorCombination[]
Custom color combinations for the gradient loading pattern (uses hex colors)
​
seed
number
Seed value for generating consistent loading patterns

​
Examples

import { ImageLoader } from "@/components/image-loader"

function Gallery({ images }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {images.map((image, index) => (
        <ImageLoader
          key={image.id}
          src={image.url}
          alt={image.title}
          width={300}
          height={300}
          objectFit="cover"
          seed={index}
        />
      ))}
    </div>
  )
}

​
Hero Image

import { ImageLoader } from "@/components/image-loader"

function Hero() {
  return (
    <div className="relative h-screen">
      <ImageLoader
        src="/hero-image.jpg"
        alt="Hero banner"
        width="100%"
        height="100vh"
        objectFit="cover"
        loading="eager"
        className="absolute inset-0"
      />
      <div className="relative z-10">
        <h1>Welcome</h1>
      </div>
    </div>
  )
}

​
Product Card

import { ImageLoader } from "@/components/image-loader"
import { Card } from "@/components/ui/card"

function ProductCard({ product }) {
  return (
    <Card>
      <ImageLoader
        src={product.imageUrl}
        alt={product.name}
        width={300}
        height={200}
        objectFit="contain"
        fallbackComponent={
          <div className="flex items-center justify-center h-full">
            <p>Image not available</p>
          </div>
        }
        onError={() => analytics.track('image_load_failed')}
      />
      <div className="p-4">
        <h3>{product.name}</h3>
        <p>{product.price}</p>
      </div>
    </Card>
  )
}
Use the seed prop to ensure consistent loading patterns for the same image across page reloads, or leave it undefined for random patterns.
The loading pattern is generated using SVG gradients with fractal noise, creating a unique and visually appealing effect that’s different from traditional skeleton loaders.

Build docs developers (and LLMs) love

Get started for freeTalk to us