add list virtualisation

ethereumfollowprotocol · Oct 25, 2024 · 86b01bf · 86b01bf
1 parent 7733c6a
commit 86b01bf
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 49 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -30,7 +30,6 @@
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
-    "immutable": "^4.3.7",
     "lodash.debounce": "^4.0.8",
     "million": "^2.6.4",
     "next": "^14.1.4",
@@ -40,6 +39,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.3.0",
+    "react-virtualized": "^9.22.5",
     "server-only": "^0.0.1",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.1",
@@ -60,6 +60,7 @@
     "@types/node": "^20.11.6",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/react-virtualized": "^9.21.30",
     "@vercel/analytics": "^1.1.2",
     "@vercel/blob": "^0.19.0",
     "@vercel/speed-insights": "^1.0.7",

diff --git a/src/components/follow-list/components/list-item/follow-list-item.tsx b/src/components/follow-list/components/list-item/follow-list-item.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import type { Address } from "viem";
 import { useQuery } from "@tanstack/react-query";
 
@@ -24,52 +25,54 @@ export interface FollowListItemProps {
   isBlockedBy?: boolean;
 }
 
-const FollowListItem: React.FC<FollowListItemProps> = ({
-  className = "",
-  address,
-  ensProfile,
-  showFollowsYouBadges,
-  showTags,
-  tags,
-  counts,
-  isFollowers,
-  canEditTags,
-  isBlockedList,
-  isBlockedBy,
-}) => {
-  const { data: fetchedEnsProfile, isLoading: isEnsProfileLoading } = useQuery({
-    queryKey: ["ens metadata", address],
-    queryFn: async () => (ensProfile ? ensProfile : await resolveEnsProfile(address)),
-  });
+const FollowListItem: React.FC<FollowListItemProps> = React.memo(
+  ({
+    className = "",
+    address,
+    ensProfile,
+    showFollowsYouBadges,
+    showTags,
+    tags,
+    counts,
+    isFollowers,
+    canEditTags,
+    isBlockedList,
+    isBlockedBy,
+  }) => {
+    const { data: fetchedEnsProfile, isLoading: isEnsProfileLoading } = useQuery({
+      queryKey: ["ens metadata", address],
+      queryFn: async () => (ensProfile ? ensProfile : await resolveEnsProfile(address)),
+    });
 
-  const profileName = fetchedEnsProfile?.name;
-  const profileAvatar = fetchedEnsProfile?.avatar;
+    const profileName = fetchedEnsProfile?.name;
+    const profileAvatar = fetchedEnsProfile?.avatar;
 
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between hover:bg-text/5 transition-all p-1.5 2xl:p-2 rounded-xl",
-        className
-      )}
-    >
-      {/* Left section: Avatar, Name, and Tags */}
-      <FollowListItemName
-        address={address}
-        avatarUrl={profileAvatar}
-        name={profileName}
-        counts={counts}
-        showFollowsYouBadges={showFollowsYouBadges}
-        showTags={showTags}
-        tags={tags}
-        isFollowers={isFollowers}
-        canEditTags={canEditTags}
-        isEnsProfileLoading={isEnsProfileLoading}
-        isBlockedList={isBlockedList}
-      />
-      {/* Right section: Follow Button with consistent width */}
-      <FollowButton isBlockedBy={isBlockedBy} address={address} />
-    </div>
-  );
-};
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-between hover:bg-text/5 transition-all p-1.5 2xl:p-2 rounded-xl",
+          className
+        )}
+      >
+        {/* Left section: Avatar, Name, and Tags */}
+        <FollowListItemName
+          address={address}
+          avatarUrl={profileAvatar}
+          name={profileName}
+          counts={counts}
+          showFollowsYouBadges={showFollowsYouBadges}
+          showTags={showTags}
+          tags={tags}
+          isFollowers={isFollowers}
+          canEditTags={canEditTags}
+          isEnsProfileLoading={isEnsProfileLoading}
+          isBlockedList={isBlockedList}
+        />
+        {/* Right section: Follow Button with consistent width */}
+        <FollowButton isBlockedBy={isBlockedBy} address={address} />
+      </div>
+    );
+  }
+);
 
 export default FollowListItem;
diff --git a/src/components/follow-list/index.tsx b/src/components/follow-list/index.tsx
@@ -1,4 +1,5 @@
 import type { Address } from "viem";
+import { List } from "react-virtualized";
 import { useTranslation } from "react-i18next";
 import Image, { type StaticImageData } from "next/image";
 
@@ -126,7 +127,7 @@ export function FollowList({
                 </div>
               )
           )}
-          {profiles?.map(({ address, tags, ens, counts }) => (
+          {/* {profiles?.map(({ address, tags, ens, counts }) => (
             <FollowListItem
               className={listItemClassName}
               key={address}
@@ -141,7 +142,37 @@ export function FollowList({
               isBlockedBy={isBlockedBy}
               isFollowers={isFollowers}
             />
-          ))}
+          ))} */}
+          <List
+            autoHeight={true}
+            autoWidth={true}
+            height={100000}
+            width={2000}
+            rowCount={profiles?.length || 0}
+            rowHeight={64}
+            className="gap-1"
+            rowRenderer={({ key, index }) => {
+              const profile = profiles?.[index];
+              if (!profile) return null;
+
+              return (
+                <FollowListItem
+                  className={listItemClassName}
+                  key={profile.address}
+                  address={profile.address}
+                  ensProfile={profile.ens}
+                  showFollowsYouBadges={showFollowsYouBadges}
+                  showTags={showTags}
+                  tags={profile.tags}
+                  counts={profile.counts}
+                  canEditTags={canEditTags}
+                  isBlockedList={isBlockedList}
+                  isBlockedBy={isBlockedBy}
+                  isFollowers={isFollowers}
+                />
+              );
+            }}
+          />
           {isLoadingMore &&
             new Array(loadingRows)
               .fill(1)

diff --git a/src/contexts/sounds-context.tsx b/src/contexts/sounds-context.tsx
@@ -24,9 +24,9 @@ type SoundsContextType = {
 const SoundsContext = createContext<SoundsContextType | undefined>(undefined);
 
 export const SoundsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [selectedVolume, setSelectedVolume] = useState("sfx only");
   const [actionsSoundsMuted, setActionsSoundsMuted] = useState(false);
   const [backgroundSoundsMuted, setBackgroundSoundsMuted] = useState(true);
-  const [selectedVolume, setSelectedVolume] = useState("sfx only");
 
   const backgroundMusicRef = useRef<HTMLAudioElement>(null);
   useEffect(() => {