perf(bundle): replace plebbit-js imports with local utility, split chunks, fix CLS and rerenders

Eliminate direct @plebbit/plebbit-js (8.7MB) imports from all UI components by replacing
Plebbit.getShortAddress() with a local get-short-address utility. Add Vite manual chunks for
plebbit-js, plebbit-react-hooks, and react-spring/use-gesture. Fix catalog CLS by matching
skeleton to wrapper dimensions. Lazy-load ChallengeModal and ReplyModal. Add failed-URL cache
to useFetchGifFirstFrame, optimize useHide selector, and memoize useFeed options in mod-queue.

src/hooks/use-fetch-gif-first-frame.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
 
 const gifFrameDb = localForageLru.createInstance({ name: '5chanGifFrames', size: 500 });
+const failedUrls = new Set<string>();
 
 const getCachedGifFrame = async (url: string): Promise<string | null> => {
   return await gifFrameDb.getItem(url);
@@ -72,6 +73,10 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
     let isActive = true;
 
     const fetchFrame = async () => {
+      if (failedUrls.has(url)) {
+        if (isActive) setFrameUrl(null);
+        return;
+      }
       try {
         const cachedFrame = await getCachedGifFrame(url);
         if (cachedFrame) {
@@ -91,6 +96,7 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
           await setCachedGifFrame(url, objectUrl);
         }
       } catch (error) {
+        failedUrls.add(url);
         console.error('Failed to load GIF frame:', error);
         if (isActive) setFrameUrl(null);
       }

src/hooks/use-hide.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { create } from 'zustand';
 import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
 
@@ -46,16 +46,14 @@ const initializeHideStore = async () => {
 initializeHideStore();
 
 const useHide = ({ cid }: { cid: string }) => {
-  const hiddenCids = useHideStore((state) => state.hiddenCids);
+  const hidden = useHideStore((state) => !!state.hiddenCids[cid]);
   const hide = useHideStore((state) => state.hide);
   const unhide = useHideStore((state) => state.unhide);
 
-  const hidden = !!hiddenCids[cid];
-
   const hideCallback = useCallback(() => hide(cid), [hide, cid]);
   const unhideCallback = useCallback(() => unhide(cid), [unhide, cid]);
 
-  return { hidden, hide: hideCallback, unhide: unhideCallback };
+  return useMemo(() => ({ hidden, hide: hideCallback, unhide: unhideCallback }), [hidden, hideCallback, unhideCallback]);
 };
 
 export default useHide;