@moontra/moonui-pro 2.17.5 → 2.18.1

package/src/components/lazy-component/index.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import React, { useState, useEffect, useRef, Suspense } from "react"
-import { motion } from "framer-motion"
+import React, { useState, useEffect, useRef, Suspense, useCallback, useMemo } from "react"
+import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { MoonUISkeletonPro as Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
-import { Eye, Loader2, Lock, Sparkles, RefreshCw } from "lucide-react"
+import { Eye, Loader2, Lock, Sparkles, RefreshCw, Activity, Zap, BarChart3, CheckCircle2, XCircle } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
 interface LazyComponentProps {
@@ -18,9 +18,39 @@ interface LazyComponentProps {
   disabled?: boolean
   onLoad?: () => void
   onVisible?: () => void
+  onError?: (error: Error) => void
   showLoadingState?: boolean
   delay?: number
   className?: string
+  // Advanced features
+  priority?: 'high' | 'normal' | 'low'
+  retryCount?: number
+  retryDelay?: number
+  enableAnalytics?: boolean
+  analyticsCallback?: (metrics: LazyLoadMetrics) => void
+  prefetch?: boolean
+  prefetchDelay?: number
+  fadeInDuration?: number
+  blurDataURL?: string
+  enableProgressiveEnhancement?: boolean
+}
+
+interface LazyLoadMetrics {
+  loadTime: number
+  visibilityTime: number
+  retryAttempts: number
+  success: boolean
+  componentName?: string
+  timestamp: number
+}
+
+interface LoadingState {
+  isVisible: boolean
+  isLoaded: boolean
+  hasError: boolean
+  error?: Error
+  retryCount: number
+  metrics: LazyLoadMetrics
 }
 
 const LazyComponentInternal: React.FC<LazyComponentProps> = ({
@@ -32,47 +62,160 @@ const LazyComponentInternal: React.FC<LazyComponentProps> = ({
   disabled = false,
   onLoad,
   onVisible,
+  onError,
   showLoadingState = true,
   delay = 0,
-  className
+  className,
+  priority = 'normal',
+  retryCount = 3,
+  retryDelay = 1000,
+  enableAnalytics = false,
+  analyticsCallback,
+  prefetch = false,
+  prefetchDelay = 2000,
+  fadeInDuration = 300,
+  blurDataURL,
+  enableProgressiveEnhancement = true
 }) => {
-  const [isVisible, setIsVisible] = useState(disabled)
-  const [isLoaded, setIsLoaded] = useState(disabled)
+  const [loadingState, setLoadingState] = useState<LoadingState>({
+    isVisible: disabled,
+    isLoaded: disabled,
+    hasError: false,
+    retryCount: 0,
+    metrics: {
+      loadTime: 0,
+      visibilityTime: 0,
+      retryAttempts: 0,
+      success: false,
+      timestamp: Date.now()
+    }
+  })
   const [hasTriggered, setHasTriggered] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
+  const visibilityTimeRef = useRef<number>(0)
+  const loadStartTimeRef = useRef<number>(0)
+
+  // Retry logic
+  const handleRetry = useCallback(() => {
+    setLoadingState(prev => ({
+      ...prev,
+      hasError: false,
+      retryCount: prev.retryCount + 1
+    }))
+    loadStartTimeRef.current = Date.now()
+    
+    // Simulate retry with delay
+    setTimeout(() => {
+      try {
+        setLoadingState(prev => ({
+          ...prev,
+          isLoaded: true,
+          hasError: false,
+          metrics: {
+            ...prev.metrics,
+            loadTime: Date.now() - loadStartTimeRef.current,
+            success: true,
+            retryAttempts: prev.retryCount
+          }
+        }))
+        
+        if (enableAnalytics && analyticsCallback) {
+          analyticsCallback(loadingState.metrics)
+        }
+        
+        onLoad?.()
+      } catch (error) {
+        if (loadingState.retryCount < retryCount) {
+          setTimeout(handleRetry, retryDelay)
+        } else {
+          setLoadingState(prev => ({
+            ...prev,
+            hasError: true,
+            error: error as Error
+          }))
+          onError?.(error as Error)
+        }
+      }
+    }, delay)
+  }, [delay, retryCount, retryDelay, onLoad, onError, enableAnalytics, analyticsCallback, loadingState.metrics, loadingState.retryCount])
+
+  // Prefetch logic
+  useEffect(() => {
+    if (prefetch && !disabled) {
+      const prefetchTimer = setTimeout(() => {
+        // Prefetch logic here
+        console.log('Prefetching component...')
+      }, prefetchDelay)
+      
+      return () => clearTimeout(prefetchTimer)
+    }
+  }, [prefetch, prefetchDelay, disabled])
 
   useEffect(() => {
     if (disabled) {
-      setIsVisible(true)
-      setIsLoaded(true)
+      setLoadingState(prev => ({
+        ...prev,
+        isVisible: true,
+        isLoaded: true
+      }))
       return
     }
 
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting && (!triggerOnce || !hasTriggered)) {
+          visibilityTimeRef.current = Date.now()
+          
           if (delay > 0) {
             setTimeout(() => {
-              setIsVisible(true)
+              setLoadingState(prev => ({ ...prev, isVisible: true }))
               setHasTriggered(true)
               onVisible?.()
               
-              // Simulate loading delay
+              loadStartTimeRef.current = Date.now()
+              
+              // Simulate loading with priority
+              const loadDelay = priority === 'high' ? delay * 0.5 : priority === 'low' ? delay * 1.5 : delay
+              
               setTimeout(() => {
-                setIsLoaded(true)
-                onLoad?.()
-              }, delay)
+                try {
+                  setLoadingState(prev => ({
+                    ...prev,
+                    isLoaded: true,
+                    metrics: {
+                      ...prev.metrics,
+                      loadTime: Date.now() - loadStartTimeRef.current,
+                      visibilityTime: Date.now() - visibilityTimeRef.current,
+                      success: true
+                    }
+                  }))
+                  
+                  if (enableAnalytics && analyticsCallback) {
+                    analyticsCallback(loadingState.metrics)
+                  }
+                  
+                  onLoad?.()
+                } catch (error) {
+                  handleRetry()
+                }
+              }, loadDelay)
             }, 100)
           } else {
-            setIsVisible(true)
-            setIsLoaded(true)
+            setLoadingState(prev => ({
+              ...prev,
+              isVisible: true,
+              isLoaded: true
+            }))
             setHasTriggered(true)
             onVisible?.()
             onLoad?.()
           }
         } else if (!entry.isIntersecting && !triggerOnce) {
-          setIsVisible(false)
-          setIsLoaded(false)
+          setLoadingState(prev => ({
+            ...prev,
+            isVisible: false,
+            isLoaded: false
+          }))
         }
       },
       {
@@ -90,9 +233,40 @@ const LazyComponentInternal: React.FC<LazyComponentProps> = ({
         observer.unobserve(containerRef.current)
       }
     }
-  }, [threshold, rootMargin, triggerOnce, delay, disabled, hasTriggered, onLoad, onVisible])
+  }, [threshold, rootMargin, triggerOnce, delay, disabled, hasTriggered, onLoad, onVisible, priority, enableAnalytics, analyticsCallback, handleRetry])
 
   const renderFallback = () => {
+    if (loadingState.hasError) {
+      return (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="flex items-center justify-center p-8 border border-destructive/50 rounded-lg bg-destructive/10"
+        >
+          <div className="text-center space-y-3">
+            <XCircle className="h-8 w-8 mx-auto text-destructive" />
+            <div>
+              <p className="text-sm font-medium">Failed to load component</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {loadingState.error?.message || 'An error occurred'}
+              </p>
+            </div>
+            {loadingState.retryCount < retryCount && (
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleRetry}
+                className="mt-2"
+              >
+                <RefreshCw className="h-3 w-3 mr-2" />
+                Retry ({loadingState.retryCount}/{retryCount})
+              </Button>
+            )}
+          </div>
+        </motion.div>
+      )
+    }
+    
     if (fallback) {
       return fallback
     }
@@ -102,18 +276,53 @@ const LazyComponentInternal: React.FC<LazyComponentProps> = ({
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          className="flex items-center justify-center p-8"
+          className="relative"
         >
-          <div className="text-center space-y-2">
-            {delay > 0 && isVisible && !isLoaded ? (
-              <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
-            ) : (
-              <Eye className="h-6 w-6 mx-auto text-muted-foreground" />
-            )}
-            <p className="text-sm text-muted-foreground">
-              {isVisible && !isLoaded ? "Loading..." : "Scroll to load content"}
-            </p>
-          </div>
+          {blurDataURL && enableProgressiveEnhancement ? (
+            <div className="relative overflow-hidden rounded-lg">
+              <img
+                src={blurDataURL}
+                alt="Loading placeholder"
+                className="w-full h-32 object-cover filter blur-xl"
+              />
+              <div className="absolute inset-0 bg-background/50 backdrop-blur-sm" />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center p-8 bg-muted/50 rounded-lg">
+              <div className="text-center space-y-3">
+                {delay > 0 && loadingState.isVisible && !loadingState.isLoaded ? (
+                  <>
+                    <div className="relative">
+                      <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+                      {priority === 'high' && (
+                        <Zap className="h-3 w-3 absolute -top-1 -right-1 text-yellow-500" />
+                      )}
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium">Loading component...</p>
+                      <p className="text-xs text-muted-foreground">
+                        Priority: {priority} • Attempt {loadingState.retryCount + 1}
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <Eye className="h-8 w-8 mx-auto text-muted-foreground" />
+                    <p className="text-sm text-muted-foreground">
+                      Scroll to load content
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {enableAnalytics && loadingState.isVisible && !loadingState.isLoaded && (
+            <div className="absolute top-2 right-2 flex items-center gap-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded">
+              <Activity className="h-3 w-3" />
+              <span>Tracking performance</span>
+            </div>
+          )}
         </motion.div>
       )
     }
@@ -123,17 +332,35 @@ const LazyComponentInternal: React.FC<LazyComponentProps> = ({
 
   return (
     <div ref={containerRef} className={cn("w-full", className)}>
-      {isLoaded ? (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          {children}
-        </motion.div>
-      ) : (
-        renderFallback()
-      )}
+      <AnimatePresence mode="wait">
+        {loadingState.isLoaded ? (
+          <motion.div
+            key="content"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: fadeInDuration / 1000 }}
+          >
+            {enableAnalytics && (
+              <div className="absolute -top-8 right-0 flex items-center gap-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded">
+                <CheckCircle2 className="h-3 w-3 text-green-500" />
+                <span>Loaded in {loadingState.metrics.loadTime}ms</span>
+              </div>
+            )}
+            {children}
+          </motion.div>
+        ) : (
+          <motion.div
+            key="fallback"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            {renderFallback()}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   )
 }
@@ -149,6 +376,17 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
   onLoad?: () => void
   onError?: () => void
   className?: string
+  // Advanced features
+  quality?: number
+  priority?: boolean
+  blur?: boolean
+  blurDataURL?: string
+  aspectRatio?: string
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+  sizes?: string
+  srcSet?: string
+  enableProgressiveLoading?: boolean
+  onProgress?: (progress: number) => void
 }
 
 export const LazyImage: React.FC<LazyImageProps> = ({
@@ -161,11 +399,23 @@ export const LazyImage: React.FC<LazyImageProps> = ({
   onLoad,
   onError,
   className,
+  quality = 85,
+  priority = false,
+  blur = true,
+  blurDataURL,
+  aspectRatio,
+  objectFit = 'cover',
+  sizes,
+  srcSet,
+  enableProgressiveLoading = false,
+  onProgress,
   ...props
 }) => {
-  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [imageSrc, setImageSrc] = useState<string | null>(priority ? src : null)
   const [imageError, setImageError] = useState(false)
-  const [isVisible, setIsVisible] = useState(false)
+  const [isVisible, setIsVisible] = useState(priority)
+  const [loadProgress, setLoadProgress] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
   const imgRef = useRef<HTMLImageElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -188,42 +438,137 @@ export const LazyImage: React.FC<LazyImageProps> = ({
   }, [threshold, rootMargin])
 
   useEffect(() => {
-    if (!isVisible) return
+    if (!isVisible || imageSrc) return
 
+    setIsLoading(true)
     const img = new Image()
-    img.onload = () => {
-      setImageSrc(src)
-      onLoad?.()
+    
+    // Progressive loading simulation
+    if (enableProgressiveLoading) {
+      let progress = 0
+      const progressInterval = setInterval(() => {
+        progress += Math.random() * 30
+        if (progress > 90) progress = 90
+        setLoadProgress(progress)
+        onProgress?.(progress)
+      }, 100)
+      
+      img.onload = () => {
+        clearInterval(progressInterval)
+        setLoadProgress(100)
+        onProgress?.(100)
+        setImageSrc(src)
+        setIsLoading(false)
+        onLoad?.()
+      }
+    } else {
+      img.onload = () => {
+        setImageSrc(src)
+        setIsLoading(false)
+        onLoad?.()
+      }
     }
+    
     img.onerror = () => {
       setImageError(true)
+      setIsLoading(false)
       if (fallbackSrc) {
         setImageSrc(fallbackSrc)
       }
       onError?.()
     }
-    img.src = src
-  }, [isVisible, src, fallbackSrc, onLoad, onError])
+    
+    // Add quality parameter to image URL if supported
+    const qualityParam = src.includes('?') ? `&q=${quality}` : `?q=${quality}`
+    img.src = src + (src.includes('http') ? qualityParam : '')
+  }, [isVisible, src, fallbackSrc, onLoad, onError, quality, enableProgressiveLoading, onProgress, imageSrc])
 
   return (
-    <div ref={containerRef} className={cn("relative overflow-hidden", className)}>
-      {imageSrc ? (
-        <motion.img
-          ref={imgRef}
-          src={imageSrc}
-          alt={alt}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.3 }}
-          className="w-full h-full object-cover"
-        />
-      ) : showPlaceholder ? (
-        <Skeleton className="w-full h-full min-h-32" />
-      ) : null}
+    <div 
+      ref={containerRef} 
+      className={cn("relative overflow-hidden bg-muted", className)}
+      style={aspectRatio ? { aspectRatio } : undefined}
+    >
+      <AnimatePresence mode="wait">
+        {/* Blur placeholder */}
+        {blur && blurDataURL && !imageSrc && (
+          <motion.img
+            key="blur"
+            src={blurDataURL}
+            alt=""
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 w-full h-full object-cover filter blur-xl scale-110"
+          />
+        )}
+        
+        {/* Main image */}
+        {imageSrc && (
+          <motion.img
+            key="main"
+            ref={imgRef}
+            src={imageSrc}
+            alt={alt}
+            sizes={sizes}
+            srcSet={srcSet}
+            initial={{ opacity: 0, scale: 1.02 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.4 }}
+            className={cn("w-full h-full", `object-${objectFit}`)}
+            {...props}
+          />
+        )}
+        
+        {/* Loading state */}
+        {isLoading && showPlaceholder && (
+          <motion.div
+            key="loading"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm"
+          >
+            <div className="text-center">
+              <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary mb-2" />
+              {enableProgressiveLoading && (
+                <div className="w-32 h-1 bg-muted rounded-full overflow-hidden">
+                  <motion.div
+                    className="h-full bg-primary"
+                    initial={{ width: 0 }}
+                    animate={{ width: `${loadProgress}%` }}
+                  />
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+        
+        {/* Skeleton placeholder */}
+        {!imageSrc && !isLoading && showPlaceholder && (
+          <Skeleton className="absolute inset-0" />
+        )}
+        
+        {/* Error state */}
+        {imageError && !fallbackSrc && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="absolute inset-0 flex items-center justify-center bg-muted"
+          >
+            <div className="text-center">
+              <XCircle className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+              <p className="text-sm text-muted-foreground">Failed to load image</p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
       
-      {imageError && !fallbackSrc && (
-        <div className="absolute inset-0 flex items-center justify-center bg-muted">
-          <p className="text-sm text-muted-foreground">Failed to load image</p>
+      {/* Priority badge */}
+      {priority && (
+        <div className="absolute top-2 right-2 bg-yellow-500/90 text-yellow-900 text-xs px-2 py-1 rounded flex items-center gap-1">
+          <Zap className="h-3 w-3" />
+          Priority
         </div>
       )}
     </div>
@@ -238,6 +583,16 @@ export interface LazyListProps<T> {
   batchSize?: number
   threshold?: number
   className?: string
+  // Advanced features
+  enableVirtualization?: boolean
+  overscan?: number
+  showLoadingIndicator?: boolean
+  loadingIndicator?: React.ReactNode
+  emptyState?: React.ReactNode
+  onBatchLoad?: (startIndex: number, endIndex: number) => void
+  enableSmoothScroll?: boolean
+  staggerAnimation?: boolean
+  animationDelay?: number
 }
 
 export function LazyList<T>({
@@ -246,25 +601,63 @@ export function LazyList<T>({
   itemHeight = 100,
   batchSize = 10,
   threshold = 0.5,
-  className
+  className,
+  enableVirtualization = false,
+  overscan = 3,
+  showLoadingIndicator = true,
+  loadingIndicator,
+  emptyState,
+  onBatchLoad,
+  enableSmoothScroll = true,
+  staggerAnimation = true,
+  animationDelay = 50
 }: LazyListProps<T>) {
   const [visibleItems, setVisibleItems] = useState<T[]>([])
   const [currentBatch, setCurrentBatch] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
   const loadingRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [scrollPosition, setScrollPosition] = useState(0)
 
   useEffect(() => {
     setVisibleItems(items.slice(0, batchSize))
     setCurrentBatch(1)
   }, [items, batchSize])
 
+  // Handle scroll for virtualization
+  const handleScroll = useCallback((e: Event) => {
+    if (enableVirtualization && containerRef.current) {
+      setScrollPosition((e.target as HTMLElement).scrollTop)
+    }
+  }, [enableVirtualization])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (enableVirtualization && container) {
+      container.addEventListener('scroll', handleScroll)
+      return () => container.removeEventListener('scroll', handleScroll)
+    }
+  }, [enableVirtualization, handleScroll])
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (entry.isIntersecting && currentBatch * batchSize < items.length) {
-          const nextBatch = currentBatch + 1
-          const newItems = items.slice(0, nextBatch * batchSize)
-          setVisibleItems(newItems)
-          setCurrentBatch(nextBatch)
+        if (entry.isIntersecting && currentBatch * batchSize < items.length && !isLoading) {
+          setIsLoading(true)
+          
+          // Simulate loading delay
+          setTimeout(() => {
+            const nextBatch = currentBatch + 1
+            const startIndex = currentBatch * batchSize
+            const endIndex = nextBatch * batchSize
+            const newItems = items.slice(0, endIndex)
+            
+            setVisibleItems(newItems)
+            setCurrentBatch(nextBatch)
+            setIsLoading(false)
+            
+            onBatchLoad?.(startIndex, endIndex)
+          }, 300)
         }
       },
       { threshold }
@@ -275,25 +668,114 @@ export function LazyList<T>({
     }
 
     return () => observer.disconnect()
-  }, [currentBatch, items, batchSize, threshold])
+  }, [currentBatch, items, batchSize, threshold, isLoading, onBatchLoad])
+
+  // Calculate visible range for virtualization
+  const visibleRange = useMemo(() => {
+    if (!enableVirtualization) return { start: 0, end: visibleItems.length }
+    
+    const start = Math.floor(scrollPosition / itemHeight) - overscan
+    const visibleCount = Math.ceil(400 / itemHeight) // Assuming container height of 400px
+    const end = start + visibleCount + overscan * 2
+    
+    return {
+      start: Math.max(0, start),
+      end: Math.min(visibleItems.length, end)
+    }
+  }, [scrollPosition, itemHeight, overscan, visibleItems.length, enableVirtualization])
+
+  if (items.length === 0 && emptyState) {
+    return (
+      <div className={cn("flex items-center justify-center p-8", className)}>
+        {emptyState}
+      </div>
+    )
+  }
 
   return (
-    <div className={cn("space-y-2", className)}>
-      {visibleItems.map((item, index) => (
-        <motion.div
-          key={index}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: (index % batchSize) * 0.05 }}
-          style={{ minHeight: itemHeight }}
-        >
-          {renderItem(item, index)}
-        </motion.div>
-      ))}
+    <div 
+      ref={containerRef}
+      className={cn(
+        "relative",
+        enableVirtualization && "overflow-auto max-h-[400px]",
+        enableSmoothScroll && "scroll-smooth",
+        className
+      )}
+    >
+      {enableVirtualization ? (
+        // Virtualized rendering
+        <>
+          <div style={{ height: visibleItems.length * itemHeight }} />
+          <div className="absolute top-0 left-0 right-0">
+            {visibleItems.slice(visibleRange.start, visibleRange.end).map((item, index) => {
+              const actualIndex = visibleRange.start + index
+              return (
+                <motion.div
+                  key={actualIndex}
+                  initial={staggerAnimation ? { opacity: 0, x: -20 } : { opacity: 1 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={staggerAnimation ? { 
+                    delay: index * (animationDelay / 1000),
+                    duration: 0.3
+                  } : undefined}
+                  style={{ 
+                    position: 'absolute',
+                    top: actualIndex * itemHeight,
+                    left: 0,
+                    right: 0,
+                    height: itemHeight
+                  }}
+                >
+                  {renderItem(item, actualIndex)}
+                </motion.div>
+              )
+            })}
+          </div>
+        </>
+      ) : (
+        // Regular lazy loading
+        <div className="space-y-2">
+          {visibleItems.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={staggerAnimation ? { opacity: 0, y: 20 } : { opacity: 1 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={staggerAnimation ? { 
+                delay: (index % batchSize) * (animationDelay / 1000),
+                duration: 0.3
+              } : undefined}
+              style={{ minHeight: itemHeight }}
+            >
+              {renderItem(item, index)}
+            </motion.div>
+          ))}
+        </div>
+      )}
       
       {currentBatch * batchSize < items.length && (
         <div ref={loadingRef} className="flex justify-center py-4">
-          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          {showLoadingIndicator && (
+            loadingIndicator || (
+              <div className="flex items-center gap-2">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                <span className="text-sm text-muted-foreground">
+                  Loading more items...
+                </span>
+              </div>
+            )
+          )}
+        </div>
+      )}
+      
+      {/* Progress indicator */}
+      {items.length > batchSize && (
+        <div className="sticky bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent pt-8 pb-2">
+          <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+            <BarChart3 className="h-3 w-3" />
+            <span>
+              Showing {visibleItems.length} of {items.length} items
+            </span>
+          </div>
         </div>
       )}
     </div>