feat: infinite scroll block list

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx

@@ -34,7 +34,6 @@ export const UserFriendModalList = ({
   const loadNextPage = () => {
     if (page > maxPage) return;
     setIsLoading(true);
-    console.log("loading next page");
     window.electron
       .getUserFriends(userId, pageSize, page * pageSize)
       .then((newPage) => {
@@ -106,7 +105,7 @@ export const UserFriendModalList = ({
           overflowY: "scroll",
         }}
       >
-        {friends.length === 0 && <p>{t("no_friends_added")}</p>}
+        {!isLoading && friends.length === 0 && <p>{t("no_friends_added")}</p>}
         {friends.map((friend) => {
           return (
             <UserFriendItem

src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx

@@ -1,9 +1,10 @@
-import { SPACING_UNIT } from "@renderer/theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { UserFriend } from "@types";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import { UserFriendItem } from "@renderer/pages/shared-modals/user-friend-modal/user-friend-item";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
 const pageSize = 12;
 
@@ -12,13 +13,16 @@ export const UserEditProfileBlockList = () => {
   const { showErrorToast } = useToast();
 
   const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
   const [maxPage, setMaxPage] = useState(0);
   const [blocks, setBlocks] = useState<UserFriend[]>([]);
+  const listContainer = useRef<HTMLDivElement>(null);
 
   const { unblockUser } = useUserDetails();
 
   const loadNextPage = () => {
     if (page > maxPage) return;
+    setIsLoading(true);
     window.electron
       .getUserBlocks(pageSize, page * pageSize)
       .then((newPage) => {
@@ -29,9 +33,29 @@ export const UserEditProfileBlockList = () => {
         setBlocks([...blocks, ...newPage.blocks]);
         setPage(page + 1);
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
   };
 
+  const handleScroll = () => {
+    const scrollTop = listContainer.current?.scrollTop || 0;
+    const scrollHeight = listContainer.current?.scrollHeight || 0;
+    const clientHeight = listContainer.current?.clientHeight || 0;
+    const maxScrollTop = scrollHeight - clientHeight;
+
+    if (scrollTop < maxScrollTop * 0.9 || isLoading) {
+      return;
+    }
+
+    loadNextPage();
+  };
+
+  useEffect(() => {
+    listContainer.current?.addEventListener("scroll", handleScroll);
+    return () =>
+      listContainer.current?.removeEventListener("scroll", handleScroll);
+  }, [isLoading]);
+
   const reloadList = () => {
     setPage(0);
     setMaxPage(0);
@@ -54,14 +78,18 @@ export const UserEditProfileBlockList = () => {
   };
 
   return (
+    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div
+        ref={listContainer}
         style={{
           display: "flex",
           flexDirection: "column",
           gap: `${SPACING_UNIT * 2}px`,
+          maxHeight: "400px",
+          overflowY: "scroll",
         }}
       >
-      {blocks.length === 0 && <p>{t("no_blocked_users")}</p>}
+        {!isLoading && blocks.length === 0 && <p>{t("no_blocked_users")}</p>}
         {blocks.map((friend) => {
           return (
             <UserFriendItem
@@ -74,6 +102,17 @@ export const UserEditProfileBlockList = () => {
             />
           );
         })}
+        {isLoading && (
+          <Skeleton
+            style={{
+              width: "100%",
+              height: "54px",
+              overflow: "hidden",
+              borderRadius: "4px",
+            }}
+          />
+        )}
       </div>
+    </SkeletonTheme>
   );
 };