fix: stabilize favorites page loading

src/pages/Favorites/index.tsx

@@ -137,6 +137,7 @@ export default function Favorites() {
   const [items, setItems] = useState<Resource[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState("");
   const [reloadKey, setReloadKey] = useState(0);
   const [showFilters, setShowFilters] = useState(false);
@@ -151,10 +152,13 @@ export default function Favorites() {
     if (!wallet.token || wallet.status !== "loggedIn") {
       setItems([]);
       setTotal(0);
+      setLoading(false);
+      setLoaded(false);
       return;
     }
     let cancelled = false;
     setLoading(true);
+    setLoaded(false);
     setError("");
     listFavorites(wallet.token, {
       sort,
@@ -170,6 +174,7 @@ export default function Favorites() {
         setItems(resources);
         setTotal(data.total ?? resources.length);
         resources.forEach((resource) => markFavorite(resource.id, true));
+        setLoaded(true);
       })
       .catch((err) => {
         if (cancelled) return;
@@ -179,6 +184,7 @@ export default function Favorites() {
           return;
         }
         setError(err instanceof Error ? err.message : t("loadFailed"));
+        setLoaded(true);
       })
       .finally(() => {
         if (!cancelled) setLoading(false);
@@ -200,6 +206,16 @@ export default function Favorites() {
     [t],
   );
 
+  if (wallet.status === "loading") {
+    return (
+      <Reveal className="mx-auto grid max-w-[980px] gap-3 px-0 py-2 md:py-4">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton key={index} className="h-[132px] rounded-2xl" />
+        ))}
+      </Reveal>
+    );
+  }
+
   if (wallet.status !== "loggedIn") {
     return (
       <Reveal className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 py-12 text-center">
@@ -330,7 +346,7 @@ export default function Favorites() {
         ) : null}
       </div>
 
-      {loading ? (
+      {loading || !loaded ? (
         <div className="grid gap-3">
           {Array.from({ length: 4 }).map((_, index) => (
             <Skeleton key={index} className="h-[132px] rounded-2xl" />