AI State Loading

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: AI Loading State
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { useEffect, useRef, useState } from "react";
14 
15const TASK_SEQUENCES = [
16  {
17    status: "Searching the web",
18    lines: [
19      "Initializing web search...",
20      "Scanning web pages...",
21      "Visiting 5 websites...",
22      "Analyzing content...",
23      "Generating summary...",
24    ],
25  },
26  {
27    status: "Analyzing results",
28    lines: [
29      "Analyzing search results...",
30      "Generating summary...",
31      "Checking for relevant information...",
32      "Finalizing analysis...",
33      "Setting up lazy loading...",
34      "Configuring caching strategies...",
35      "Running performance tests...",
36      "Finalizing optimizations...",
37    ],
38  },
39  {
40    status: "Enhancing UI/UX",
41    lines: [
42      "Initializing UI enhancement scan...",
43      "Checking accessibility compliance...",
44      "Analyzing component animations...",
45      "Reviewing loading states...",
46      "Testing responsive layouts...",
47      "Optimizing user interactions...",
48      "Validating color contrast...",
49      "Checking motion preferences...",
50      "Finalizing UI improvements...",
51    ],
52  },
53];
54 
55const LoadingAnimation = ({ progress }: { progress: number }) => (
56  <div className="relative h-6 w-6">
57    <svg
58      aria-label={`Loading progress: ${Math.round(progress)}%`}
59      className="h-full w-full"
60      fill="none"
61      viewBox="0 0 240 240"
62      xmlns="http://www.w3.org/2000/svg"
63    >
64      <title>Loading Progress Indicator</title>
65 
66      <defs>
67        <mask id="progress-mask">
68          <rect fill="black" height="240" width="240" />
69          <circle
70            cx="120"
71            cy="120"
72            fill="white"
73            r="120"
74            strokeDasharray={`${(progress / 100) * 754}, 754`}
75            transform="rotate(-90 120 120)"
76          />
77        </mask>
78      </defs>
79 
80      <style>
81        {`
82                    @keyframes rotate-cw {
83                        from { transform: rotate(0deg); }
84                        to { transform: rotate(360deg); }
85                    }
86                    @keyframes rotate-ccw {
87                        from { transform: rotate(360deg); }
88                        to { transform: rotate(0deg); }
89                    }
90                    .g-spin circle {
91// … truncated