Custom loading spinners and skeleton screens with SKR Studio branding
Small
Medium
Large
Extra Large
Golden Primary
Midnight Navy
Dual Color
Loading Dots
Pulse Animation
Full Page Overlay
Heading Skeleton:
Text Skeleton (3 lines):
Profile Skeleton:
Generic Card:
Artwork Card:
Product Card:
// Import components
import { LoadingSpinner } from "@/components/LoadingSpinner";
import { SkeletonGalleryGrid } from "@/components/SkeletonLoaders";
// Use in your component
function GalleryPage() {
const { data, isLoading } = trpc.gallery.getArtworks.useQuery();
if (isLoading) {
return <SkeletonGalleryGrid count={6} />;
}
return (
<div className="grid md:grid-cols-3 gap-6">
{data.map(artwork => (
<ArtworkCard key={artwork.id} {...artwork} />
))}
</div>
);
}