Image Loader

An advanced image loading component with beautiful loading states, error handling, and performance optimizations.

Usage

image-loader.tsx

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

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

Installation

Install the Image Loader component using your preferred package manager.

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

Features

The Image Loader component is packed with powerful features designed to provide an exceptional user experience.

Beautiful Loading States

Dynamic SVG patterns with gradient effects provide visually appealing loading experiences.

Optimized Performance

Lazy loading, async decoding, and efficient pattern generation for optimal performance.

Responsive Design

Automatically adapts to different screen sizes and container dimensions.

Error Handling

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

Props

Prop	Type	Default
`src`	`string`	`undefined`
`alt`	`string`	`undefined`
`className?`	`string`	`''`
`blurIntensity?`	`string`	`'blur(50px)'`
`width?`	`number \| string`	`400`
`height?`	`number \| string`	`300`
`fallbackComponent?`	`React.ReactNode`	`undefined`
`onLoad?`	`() => void`	`undefined`
`onError?`	`(error: Event) => void`	`undefined`
`loading?`	`'lazy' \| 'eager'`	`'lazy'`
`objectFit?`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`
`customColors?`	`ColorCombination[]`	`undefined`
`seed?`	`number`	`undefined`