Merge version_4_1782384188447 into main

Merge version_4_1782384188447 into main

src/pages/HomePage/sections/ResultSearch.tsx

@@ -4,16 +4,23 @@ import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
 import Card from "@/components/ui/Card";
 import ScrollReveal from "@/components/ui/ScrollReveal";
+import Spinner from "@/components/ui/Spinner";
 import { Search, GraduationCap, BookOpen, Award } from "lucide-react";
 
 export default function ResultSearch() {
-  const [searchQuery, setSearchQuery] = useState("2025-ag-11653");
-  const [hasSearched, setHasSearched] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [hasSearched, setHasSearched] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     if (searchQuery.trim().toLowerCase() === "2025-ag-11653") {
-      setHasSearched(true);
+      setIsLoading(true);
+      setHasSearched(false);
+      setTimeout(() => {
+        setIsLoading(false);
+        setHasSearched(true);
+      }, 5000);
     } else if (searchQuery.trim() !== "") {
       alert("Please enter a valid AG No. (e.g., 2025-ag-11653)");
       setHasSearched(false);
@@ -69,7 +76,14 @@ export default function ResultSearch() {
           </Card>
         </ScrollReveal>
 
-        {hasSearched && (
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <Spinner size="lg" className="text-primary-cta" />
+            <p className="text-accent font-medium animate-pulse">Retrieving academic records...</p>
+          </div>
+        )}
+
+        {hasSearched && !isLoading && (
           <ScrollReveal variant="fade" delay={0.2}>
             <div className="max-w-content-width mx-auto space-y-8">
               {/* Section 1: Student Info */}