fix: search shows products immediately (AI loads in background) + more dramatic page transitions

src/app/search/page.tsx

@@ -35,19 +35,10 @@ function SearchContent() {
     setAllProducts([]);
     setVideos([]);
 
-    // Search products + videos in parallel with AI
-    const [searchResp, vidResp, aiResp] = await Promise.all([
+    // Step 1: Fetch products + videos FIRST (fast, shows results immediately)
+    const [searchResp, vidResp] = await Promise.all([
       api.products.search(q, null),
       api.videos.feed(50).catch(() => ({ success: false, videos: [] })),
-      fetch('/api/ai-chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          message: `A user searched for "${q}" on Cellex (a Nigerian e-commerce marketplace). Provide a helpful, comprehensive answer about what's available. Mention types of products, price ranges, and shopping tips. Be friendly and informative (2-3 paragraphs).`,
-          context: 'Search overview',
-          history: [],
-        }),
-      }),
     ]);
 
     const products = searchResp.success
@@ -55,6 +46,7 @@ function SearchContent() {
       : [];
     setAllProducts(products);
     setAiProducts(products.slice(0, 4));
+    setLoading(false); // Stop loading — products are visible now
 
     // Filter videos
     if (vidResp.success) {
@@ -67,15 +59,26 @@ function SearchContent() {
       setVideos(filtered);
     }
 
-    // AI response
-    if (aiResp.ok) {
-      const data = await aiResp.json();
-      setAiAnswer(data.reply || data.message || data.content || `Here's what I found for "${q}": ${products.length} products available.`);
-    } else {
+    // Step 2: Fetch AI response IN THE BACKGROUND (don't block product display)
+    try {
+      const aiResp = await fetch('/api/ai-chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `A user searched for "${q}" on Cellex (a Nigerian e-commerce marketplace). Provide a helpful, comprehensive answer about what's available. Mention types of products, price ranges, and shopping tips. Be friendly and informative (2-3 paragraphs).`,
+          context: 'Search overview',
+          history: [],
+        }),
+      });
+      if (aiResp.ok) {
+        const data = await aiResp.json();
+        setAiAnswer(data.reply || data.message || data.content || `Here's what I found for "${q}": ${products.length} products available on Cellex.`);
+      } else {
+        setAiAnswer(`Here's what I found for "${q}": ${products.length} products available on Cellex.`);
+      }
+    } catch {
       setAiAnswer(`Here's what I found for "${q}": ${products.length} products available on Cellex.`);
     }
-
-    setLoading(false);
   }, []);
 
   useEffect(() => {

src/app/template.tsx

@@ -5,11 +5,8 @@ import { motion } from 'framer-motion';
 
 /**
  * Template — cinematic page transitions using framer-motion.
- * 
- * Each page:
- * - Enters: slides in from right (12px) + fades in + slides up (8px)
- * - Uses spring physics for a natural, premium feel
- * - Re-triggers on every pathname change
+ * More dramatic: slides in from right + scales up slightly + fades in.
+ * Re-triggers on every pathname change.
  */
 export default function Template({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -17,10 +14,10 @@ export default function Template({ children }: { children: React.ReactNode }) {
   return (
     <motion.div
       key={pathname}
-      initial={{ opacity: 0, x: 12, y: 8 }}
-      animate={{ opacity: 1, x: 0, y: 0 }}
-      exit={{ opacity: 0, x: -12, scale: 0.98 }}
-      transition={{ duration: 0.35, ease: [0.32, 0.72, 0, 1] }}
+      initial={{ opacity: 0, x: 30, scale: 0.98 }}
+      animate={{ opacity: 1, x: 0, scale: 1 }}
+      transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
+      style={{ willChange: 'transform, opacity' }}
     >
       {children}
     </motion.div>