From d37b706751657deaacf6a8394a04c1f3cfe126f1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 19 Jan 2026 18:08:47 +0100
Subject: [PATCH] feat: add animation to collapsible section for worst
 performance pages in PerformanceStats component

---
 components/dashboard/PerformanceStats.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/PerformanceStats.tsx b/components/dashboard/PerformanceStats.tsx
index f48d816..28aeb33 100644
--- a/components/dashboard/PerformanceStats.tsx
+++ b/components/dashboard/PerformanceStats.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
 import { ChevronDownIcon } from '@radix-ui/react-icons'
 import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
 import Select from '@/components/ui/Select'
@@ -145,8 +146,16 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
             />
           )}
         </div>
-        {worstPagesOpen && (
-          loadingTable ? (
+        <motion.div
+          initial={false}
+          animate={{
+            height: worstPagesOpen ? 'auto' : 0,
+            opacity: worstPagesOpen ? 1 : 0,
+          }}
+          transition={{ duration: 0.25, ease: 'easeInOut' }}
+          style={{ overflow: 'hidden' }}
+        >
+          {loadingTable ? (
             <div className="py-8 text-center text-neutral-500 text-sm">Loading…</div>
           ) : rows.length === 0 ? (
             <div className="py-6 text-center text-neutral-500 text-sm">
@@ -185,8 +194,8 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
                 </tbody>
               </table>
             </div>
-          )
-        )}
+          )}
+        </motion.div>
       </div>
     </div>
   )