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

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

/**
 * @fileoverview Lazy Loading React Components
 *
 * This module provides React components for implementing lazy loading patterns
 * with JSX support, including LazyLoadComponent and error boundaries.
 */
import React, { Component, ComponentType } from 'react';
import type { ReactNode } from 'react';
import { type IntersectionObserverOptions } from '../utils/lazy-loading';
import type { ErrorDetails } from './ErrorBoundary';
/**
 * Props for lazy loading component
 */
export interface LazyLoadComponentProps {
    /** Component to load lazily */
    component: ComponentType<any>;
    /** Props to pass to the component */
    props?: any;
    /** Loading fallback */
    fallback?: ReactNode;
    /** Error fallback */
    errorFallback?: ReactNode;
    /** Container className */
    className?: string;
    /** Container style */
    style?: React.CSSProperties;
    /** Intersection observer options */
    intersectionOptions?: IntersectionObserverOptions;
    /** Whether to start loading immediately */
    immediate?: boolean;
}
/**
 * Lazy loading component with intersection observer
 */
export declare const LazyLoadComponent: React.FC<LazyLoadComponentProps>;
/**
 * Props for Suspense wrapper
 */
interface SuspenseWrapperProps {
    /** Children to wrap */
    children: ReactNode;
    /** Loading fallback */
    fallback?: ReactNode;
    /** Error fallback component */
    errorFallback?: ComponentType<{
        error: Error;
        retry: () => void;
    }>;
    /** Error handler */
    onError?: (error: ErrorDetails) => void;
}
/**
 * Enhanced Suspense wrapper with error boundary
 */
export declare const SuspenseWrapper: React.FC<SuspenseWrapperProps>;
/**
 * Props for lazy error boundary
 */
interface LazyErrorBoundaryProps {
    children: ReactNode;
    ErrorFallback: React.ComponentType<{
        error: Error;
        retry: () => void;
    }>;
    onError?: ((error: Error) => void) | undefined;
}
/**
 * Error boundary state
 */
interface LazyErrorBoundaryState {
    hasError: boolean;
    error: Error | null;
}
/**
 * Error boundary specifically for lazy-loaded components
 */
export declare class LazyErrorBoundary extends Component<LazyErrorBoundaryProps, LazyErrorBoundaryState> {
    constructor(props: LazyErrorBoundaryProps);
    static getDerivedStateFromError(error: Error): LazyErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
    private handleRetry;
    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
}
/**
 * Options for lazy HOC
 */
export interface LazyHOCOptions {
    /** Loading fallback */
    fallback?: ReactNode;
    /** Error fallback component */
    errorFallback?: ReactNode;
    /** Error handler */
    onError?: (error: Error, errorInfo: any) => void;
    /** Preload on hover */
    preloadOnHover?: boolean;
    /** Hover delay for preloading */
    hoverDelay?: number;
}
/**
 * Create a lazy-loaded higher-order component
 */
export declare function withLazyLoading<P extends object>(loader: () => Promise<{
    default: React.ComponentType<P>;
}>, options?: LazyHOCOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
/**
 * Create lazy component with Suspense wrapper
 */
export declare function createLazyComponentWithSuspense<T extends React.ComponentType<any>>(loader: () => Promise<{
    default: T;
}>, fallback?: React.ReactNode): React.ComponentType<React.ComponentProps<T>>;
/**
 * Route-based lazy component wrapper
 */
export interface RouteBasedLazyProps {
    /** Route to component mapping */
    routeMap: Record<string, ComponentType<any>>;
    /** Current route */
    currentRoute: string;
    /** Props to pass to component */
    componentProps?: any;
    /** Loading fallback */
    fallback?: ReactNode;
    /** Error fallback */
    errorFallback?: ComponentType<{
        error: Error;
        retry: () => void;
    }>;
}
/**
 * Route-based lazy component loader
 */
export declare const RouteBasedLazy: React.FC<RouteBasedLazyProps>;
/**
 * Props for intersection observer wrapper
 */
export interface IntersectionWrapperProps {
    /** Children to render when in view */
    children: ReactNode;
    /** Placeholder to show when not in view */
    placeholder?: ReactNode;
    /** Intersection observer options */
    options?: IntersectionObserverOptions;
    /** Additional className */
    className?: string;
    /** Additional styles */
    style?: React.CSSProperties;
    /** Callback when element enters viewport */
    onIntersect?: () => void;
}
/**
 * Wrapper component that only renders children when in viewport
 */
export declare const IntersectionWrapper: React.FC<IntersectionWrapperProps>;
/**
 * Lazy load image with placeholder
 */
export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    src: string;
    alt: string;
    placeholder?: 'blur' | 'empty';
}
export declare const LazyImage: React.FC<LazyImageProps>;
export {};
//# sourceMappingURL=LazyLoadComponents.d.ts.map