fix: smooth mobile footer tab switching

src/layouts/PublicLayout.tsx

@@ -764,9 +764,8 @@ function BottomNavIcon({
   icon: "home" | "document" | "bookmark" | "update";
   active: boolean;
 }) {
-  const src = active
-    ? `${NAVBAR_ICON_BASE}/${icon}-active.svg`
-    : `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
+  const activeSrc = `${NAVBAR_ICON_BASE}/${icon}-active.svg`;
+  const inactiveSrc = `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
   return (
     <Link
       to={to}
@@ -775,15 +774,30 @@ function BottomNavIcon({
         active ? "text-ark-gold" : "text-[#908F92]",
       ].join(" ")}
     >
-      <img
-        src={src}
-        alt=""
-        className="mx-auto h-6 w-6 object-contain"
-        width={24}
-        height={24}
-        loading="lazy"
-        decoding="async"
-      />
+      <span className="relative h-6 w-6" aria-hidden>
+        <img
+          src={inactiveSrc}
+          alt=""
+          className={`absolute inset-0 h-6 w-6 object-contain ${
+            active ? "opacity-0" : "opacity-100"
+          }`}
+          width={24}
+          height={24}
+          loading="eager"
+          decoding="sync"
+        />
+        <img
+          src={activeSrc}
+          alt=""
+          className={`absolute inset-0 h-6 w-6 object-contain ${
+            active ? "opacity-100" : "opacity-0"
+          }`}
+          width={24}
+          height={24}
+          loading="eager"
+          decoding="sync"
+        />
+      </span>
       <span className="leading-tight">{label}</span>
     </Link>
   );