Improve browser detection and table UX for Firefox

Standardizes browser detection logic across admin and storefront pages to more accurately identify Firefox. Updates table rendering logic to provide better compatibility and fallback for Firefox, including conditional use of AnimatePresence and improved loading/empty states. Refines table UI styles for consistency and accessibility.

components/tables/product-table.tsx

@@ -18,6 +18,7 @@ import {
   Archive
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import React, { useState, useEffect } from "react";
 import { Product } from "@/models/products";
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
@@ -191,6 +192,15 @@ const ProductTable = ({
     </motion.tr>
   );
 
+  const [searchQuery, setSearchQuery] = useState("");
+  // Browser detection
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    const ua = navigator.userAgent.toLowerCase();
+    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
+  }, []);
+
   const renderTableHeader = () => (
     <TableHeader className="bg-muted/50 sticky top-0 z-10">
       <TableRow className="hover:bg-transparent border-border/50">
@@ -228,8 +238,8 @@ const ProductTable = ({
             <Table>
               {renderTableHeader()}
               <TableBody>
-                <AnimatePresence>
-                  {loading ? (
+                {isFirefox ? (
+                  loading ? (
                     <TableRow>
                       <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                         <div className="flex flex-col items-center gap-2">
@@ -249,8 +259,32 @@ const ProductTable = ({
                         </div>
                       </TableCell>
                     </TableRow>
-                  )}
-                </AnimatePresence>
+                  )
+                ) : (
+                  <AnimatePresence>
+                    {loading ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
+                          <div className="flex flex-col items-center gap-2">
+                            <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
+                            <span>Loading products...</span>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : sortedEnabledProducts.length > 0 ? (
+                      sortedEnabledProducts.map((product, index) => renderProductRow(product, index))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
+                          <div className="flex flex-col items-center justify-center gap-2">
+                            <PackageX className="h-8 w-8 opacity-20" />
+                            <p>No active products found</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </AnimatePresence>
+                )}
               </TableBody>
             </Table>
           </div>