Loading Progress Indicator

"use client"; /** * @author: @kokonutui * @description: AI Loading State * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { useEffect, useRef, useState } from "react"; const TASK_SEQUENCES = [ { status: "Searching the web", lines: [ "Initializing web search...", "Scanning web pages...", "Visiting 5 websites...", "Analyzing content...", "Generating summary...", ], }, { status: "Analyzing results", lines: [ "Analyzing search results...", "Generating summary...", "Checking for relevant information...", "Finalizing analysis...", "Setting up lazy loading...", "Configuring caching strategies...", "Running performance tests...", "Finalizing optimizations...", ], }, { status: "Enhancing UI/UX", lines: [ "Initializing UI enhancement scan...", "Checking accessibility compliance...", "Analyzing component animations...", "Reviewing loading states...", "Testing responsive layouts...", "Optimizing user interactions...", "Validating color contrast...", "Checking motion preferences...", "Finalizing UI improvements...", ], }, ]; const LoadingAnimation = ({ progress }: { progress: number }) => (

); export default function AILoadingState() { const [sequenceIndex, setSequenceIndex] = useState(0); const [visibleLines, setVisibleLines] = useState< Array<{ text: string; number: number }> >([]); const [scrollPosition, setScrollPosition] = useState(0); const codeContainerRef = useRef(null); const lineHeight = 28; const currentSequence = TASK_SEQUENCES[sequenceIndex]; const totalLines = currentSequence.lines.length; useEffect(() => { const initialLines = []; for (let i = 0; i < Math.min(5, totalLines); i++) { initialLines.push({ text: currentSequence.lines[i], number: i + 1, }); } setVisibleLines(initialLines); setScrollPosition(0); }, [sequenceIndex, currentSequence.lines, totalLines]); // Handle line advancement useEffect(() => { const advanceTimer = setInterval(() => { // Get the current first visible line index const firstVisibleLineIndex = Math.floor(scrollPosition / lineHeight); const nextLineIndex = (firstVisibleLineIndex + 3) % totalLines; // If we're about to wrap around, move to next sequence if (nextLineIndex < firstVisibleLineIndex && nextLineIndex !== 0) { setSequenceIndex( (prevIndex) => (prevIndex + 1) % TASK_SEQUENCES.length ); return; } // Add the next line if needed if (nextLineIndex >= visibleLines.length && nextLineIndex < totalLines) { setVisibleLines((prevLines) => [ ...prevLines, { text: currentSequence.lines[nextLineIndex], number: nextLineIndex + 1, }, ]); } // Scroll to the next line setScrollPosition((prevPosition) => prevPosition + lineHeight); }, 2000); // Slightly slower than the example for better readability return () => clearInterval(advanceTimer); }, [ scrollPosition, visibleLines, totalLines, sequenceIndex, currentSequence.lines, lineHeight, ]); // Apply scroll position useEffect(() => { if (codeContainerRef.current) { codeContainerRef.current.scrollTop = scrollPosition; } }, [scrollPosition]); return (

{currentSequence.status}...

{visibleLines.map((line, index) => (

{line.number}

{line.text}

))}

); }

AI State Loading

Instalação

Dependências