refactor image with fallback and added virtuoso

package.json

@@ -42,6 +42,7 @@
     "react-hook-form": "^7.43.8",
     "react-player": "^2.12.0",
     "react-string-replace": "^1.1.0",
+    "react-virtuoso": "^4.1.1",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
     "unique-names-generator": "^4.7.1",
     "ws": "^8.13.0"

pnpm-lock.yaml

@@ -52,6 +52,7 @@ specifiers:
   react-hook-form: ^7.43.8
   react-player: ^2.12.0
   react-string-replace: ^1.1.0
+  react-virtuoso: ^4.1.1
   tailwindcss: ^3.2.7
   tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
   typescript: ^4.9.5
@@ -89,6 +90,7 @@ dependencies:
   react-hook-form: 7.43.8_react@18.2.0
   react-player: 2.12.0_react@18.2.0
   react-string-replace: 1.1.0
+  react-virtuoso: 4.1.1_biqbaboplfbrettd7655fr4n2y
   tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/3a8b9a6b244df7512bc5ef8692cebdedbab3ccce
   unique-names-generator: 4.7.1
   ws: 8.13.0
@@ -4514,6 +4516,18 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /react-virtuoso/4.1.1_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-G2lyifG5UIRZI9vgcBt+6OLDL6CO5/O6YiGS+O9z+VNRjVSTioSwfBC7sVSLspYq7iyL60aIXlVqSKVJiSVhlg== }
+    engines: { node: '>=10' }
+    peerDependencies:
+      react: '>=16 || >=17 || >= 18'
+      react-dom: '>=16 || >=17 || >= 18'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution:
       { integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== }

src/components/columns/navigator/chats/index.tsx

@@ -1,29 +1,14 @@
-import { MessageList } from '@components/columns/navigator/messages/list';
-
-import { activeAccountAtom } from '@stores/account';
-
-import { getAllFollowsByID } from '@utils/storage';
-
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { TriangleUpIcon } from '@radix-ui/react-icons';
-import { useAtom } from 'jotai';
+import { useState } from 'react';
-import { useEffect, useState } from 'react';
 
-export default function Messages() {
+export default function Chats() {
   const [open, setOpen] = useState(true);
-  const [follows, setFollows] = useState([]);
-  const [activeAccount] = useAtom(activeAccountAtom);
-
-  useEffect(() => {
-    getAllFollowsByID(activeAccount.id)
-      .then((res: any) => setFollows(res))
-      .catch(console.error);
-  }, [activeAccount.id]);
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
       <div className="flex h-full flex-col gap-1 px-2 pb-8">
-        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''
@@ -35,9 +20,7 @@ export default function Messages() {
             Chats
           </h3>
         </Collapsible.Trigger>
-        <Collapsible.Content className="h-full">
+        <Collapsible.Content className="h-full"></Collapsible.Content>
-          <MessageList data={follows} />
-        </Collapsible.Content>
       </div>
     </Collapsible.Root>
   );

src/components/columns/navigator/index.tsx

@@ -1,4 +1,4 @@
-import Messages from '@components/columns/navigator/messages';
+import Chats from '@components/columns/navigator/chats';
 import Newsfeed from '@components/columns/navigator/newsfeed';
 
 export default function NavigatorColumn() {
@@ -6,8 +6,8 @@ export default function NavigatorColumn() {
     <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
       {/* Newsfeed */}
       <Newsfeed />
-      {/* Messages */}
+      {/* Chats */}
-      <Messages />
+      <Chats />
     </div>
   );
 }

src/components/columns/navigator/messages/list.tsx

@@ -1,33 +0,0 @@
-import { UserMini } from '@components/user/mini';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { Suspense, memo, useRef } from 'react';
-
-export const MessageList = memo(function MessageList({ data }: { data: any }) {
-  const parentRef = useRef(null);
-
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    estimateSize: () => 32,
-    getScrollElement: () => parentRef.current,
-  });
-  const items = virtualizer.getVirtualItems();
-
-  return (
-    <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-      <Suspense fallback={<p className="text-sm text-zinc-400">Loading...</p>}>
-        {items.length > 0 && (
-          <div className="relative mb-24 w-full" style={{ height: virtualizer.getTotalSize() }}>
-            <div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
-              {items.map((virtualRow) => (
-                <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
-                  <UserMini pubkey={data[virtualRow.index].pubkey} />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </Suspense>
-    </div>
-  );
-});

src/components/imageWithFallback.tsx

@@ -1,4 +1,5 @@
-import Avatar from 'boring-avatars';
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import Image from 'next/image';
 import { memo, useEffect, useState } from 'react';
 
@@ -20,27 +21,6 @@ export const ImageWithFallback = memo(function ImageWithFallback({
   }, [src]);
 
   return (
-    <>
+    <Image src={error ? DEFAULT_AVATAR : src} alt={alt} fill={fill} className={className} onError={setError} priority />
-      {error ? (
-        <Avatar
-          size={44}
-          name={alt}
-          variant="beam"
-          square={true}
-          colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-        />
-      ) : (
-        <Image
-          src={src}
-          alt={alt}
-          fill={fill}
-          className={className}
-          onError={setError}
-          placeholder="blur"
-          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
-          priority
-        />
-      )}
-    </>
   );
 });

src/components/user/mini.tsx

@@ -1,53 +1,35 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
+import { useCallback, useEffect, useState } from 'react';
-import Avatar from 'boring-avatars';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
 
-export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
+export const UserMini = ({ pubkey }: { pubkey: string }) => {
   const [profile, setProfile] = useState(null);
 
-  const fetchProfile = useCallback(async (id: string) => {
+  const fetchCacheProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+    const res = await getCacheProfile(id);
-      method: 'GET',
+    const data = JSON.parse(res.metadata);
-      timeout: 30,
+    setProfile(data);
-    });
-    return res.data;
   }, []);
 
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
+    fetchCacheProfile(pubkey).catch(console.error);
-      if (res) {
+  }, [fetchCacheProfile, pubkey]);
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
 
+  if (profile) {
     return (
       <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
         <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
-        {profile?.picture ? (
+          <ImageWithFallback
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
+            src={profile?.picture || DEFAULT_AVATAR}
-        ) : (
+            alt={pubkey}
-          <Avatar
+            fill={true}
-            size={20}
+            className="rounded object-cover"
-            name={pubkey}
-            variant="beam"
-            square={true}
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
           />
-        )}
         </div>
         <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
           <p className="truncate leading-tight text-zinc-300">
@@ -56,4 +38,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
         </div>
       </div>
     );
-});
+  } else {
+    return <></>;
+  }
+};

src/stores/constants.tsx

@@ -0,0 +1 @@
+export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';