@ai-growth/nextjs/dist/components/LoadingComponents.d.ts

Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering

import React, { ReactNode, CSSProperties } from 'react';
export interface SkeletonProps {
    /** Width of the skeleton element */
    width?: string | number;
    /** Height of the skeleton element */
    height?: string | number;
    /** Border radius for rounded skeletons */
    borderRadius?: string | number;
    /** Custom CSS class */
    className?: string;
    /** Custom inline styles */
    style?: CSSProperties;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
    /** Animation duration in seconds */
    animationDuration?: number;
    /** Background color for the skeleton */
    backgroundColor?: string;
    /** Highlight color for the animation */
    highlightColor?: string;
    /** Whether to show the skeleton (useful for conditional rendering) */
    visible?: boolean;
}
export interface LoadingContextValue {
    /** Global loading state */
    isLoading: boolean;
    /** Set global loading state */
    setLoading: (loading: boolean) => void;
    /** Loading states for specific operations */
    loadingStates: Record<string, boolean>;
    /** Set loading state for a specific operation */
    setOperationLoading: (operation: string, loading: boolean) => void;
    /** Check if a specific operation is loading */
    isOperationLoading: (operation: string) => boolean;
}
export interface LoadingProviderProps {
    children: ReactNode;
    /** Initial global loading state */
    initialLoading?: boolean;
}
export interface ContentSkeletonProps {
    /** Number of text lines to show */
    lines?: number;
    /** Whether to show header skeleton */
    showHeader?: boolean;
    /** Whether to show image skeleton */
    showImage?: boolean;
    /** Whether to show author info skeleton */
    showAuthor?: boolean;
    /** Custom CSS class */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}
export interface CardSkeletonProps {
    /** Number of cards to display */
    count?: number;
    /** Whether to show image in cards */
    showImage?: boolean;
    /** Custom CSS class */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}
export interface ListSkeletonProps {
    /** Number of list items */
    count?: number;
    /** Whether to show avatar in list items */
    showAvatar?: boolean;
    /** Number of text lines per item */
    lines?: number;
    /** Custom CSS class */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}
/**
 * Provider for managing global and operation-specific loading states
 */
export declare const LoadingProvider: React.FC<LoadingProviderProps>;
/**
 * Hook to access loading context
 */
export declare const useLoading: () => LoadingContextValue;
/**
 * Hook for managing operation-specific loading states
 */
export declare const useOperationLoading: (operationName: string) => {
    isLoading: boolean;
    setLoading: (loading: boolean) => void;
};
/**
 * Base skeleton component with customizable appearance and animations
 */
export declare const Skeleton: React.FC<SkeletonProps>;
/**
 * Skeleton for article/blog content with header, body, and optional elements
 */
export declare const ContentSkeleton: React.FC<ContentSkeletonProps>;
/**
 * Skeleton for card components
 */
export declare const CardSkeleton: React.FC<CardSkeletonProps>;
/**
 * Skeleton for list components
 */
export declare const ListSkeleton: React.FC<ListSkeletonProps>;
/**
 * General loading fallback component for use with Suspense
 */
export declare const LoadingFallback: React.FC<{
    message?: string;
    animation?: 'pulse' | 'wave' | 'none';
    className?: string;
}>;
/**
 * CMS-specific loading component
 */
export declare const CmsLoadingFallback: React.FC<{
    contentType?: string;
    animation?: 'pulse' | 'wave' | 'none';
    className?: string;
}>;
/**
 * Button loading component
 */
export declare const ButtonLoading: React.FC<{
    size?: 'small' | 'medium' | 'large';
    variant?: 'spinner' | 'dots' | 'pulse';
    color?: string;
}>;
/**
 * Page loading overlay
 */
export declare const PageLoadingOverlay: React.FC<{
    isVisible: boolean;
    message?: string;
    variant?: 'spinner' | 'skeleton';
    className?: string;
}>;
/**
 * Hook for managing async operations with loading states
 */
export declare function useAsyncOperation<T = any>(): {
    isLoading: boolean;
    error: Error | null;
    data: T | null;
    execute: (asyncFunction: () => Promise<T>) => Promise<T>;
    reset: () => void;
};
/**
 * Hook for delayed loading states (prevents flash of loading state)
 */
export declare function useDelayedLoading(isLoading: boolean, delay?: number): boolean;
export default LoadingFallback;
//# sourceMappingURL=LoadingComponents.d.ts.map