refactor: streamline data loading in FunnelsPage and FunnelReportPage by reintroducing useEffect hooks for improved state management and responsiveness

app/sites/[id]/funnels/[funnelId]/page.tsx

@@ -47,16 +47,6 @@ export default function FunnelReportPage() {
   const [dateRange, setDateRange] = useState(getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
-  useEffect(() => {
-    loadData()
-  }, [siteId, funnelId, dateRange])
-
-  const { resolvedTheme } = useTheme()
-  const chartColors = useMemo(
-    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
-    [resolvedTheme]
-  )
-
   const loadData = async () => {
     try {
       setLoading(true)
@@ -73,6 +63,16 @@ export default function FunnelReportPage() {
     }
   }
 
+  useEffect(() => {
+    loadData()
+  }, [siteId, funnelId, dateRange])
+
+  const { resolvedTheme } = useTheme()
+  const chartColors = useMemo(
+    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
+    [resolvedTheme]
+  )
+
   const handleDelete = async () => {
     if (!confirm('Are you sure you want to delete this funnel?')) return
 

app/sites/[id]/funnels/page.tsx

@@ -16,10 +16,6 @@ export default function FunnelsPage() {
   const [funnels, setFunnels] = useState<Funnel[]>([])
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    loadFunnels()
-  }, [siteId])
-
   const loadFunnels = async () => {
     try {
       setLoading(true)
@@ -32,6 +28,10 @@ export default function FunnelsPage() {
     }
   }
 
+  useEffect(() => {
+    loadFunnels()
+  }, [siteId])
+
   const handleDelete = async (e: React.MouseEvent, funnelId: string) => {
     e.preventDefault() // Prevent navigation
     if (!confirm('Are you sure you want to delete this funnel?')) return