Merge pull request #1019 from githru/feature/#1003_infinity-scroll

feat(view): 클러스터 목록 무한 스크롤 구현

Author: ytaek

packages/view/src/App.scss

@@ -45,32 +45,4 @@ body {
   h1 {
     margin: 2.5rem 0 0 0;
   }
-}
-
-.load-more-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.25rem 0;
-}
-
-.load-more-button {
-  background-color: var(--color-primary);
-  color: var(--color-white);
-  border: none;
-  border-radius: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  font-size: $font-size-body;
-  font-weight: $font-weight-semibold;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-
-  &:hover {
-    background-color: var(--color-secondary);
-  }
-
-  &:disabled {
-    background-color: var(--color-grey-100);
-    cursor: not-allowed;
-  }
-}
+}

packages/view/src/App.tsx

@@ -26,19 +26,14 @@ import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeS
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 import { InsightsButton } from "components/InsightsButton";
 import { pxToRem } from "utils";
-import { initializeIDEConnection, sendFetchAnalyzedDataCommand } from "services";
-import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
+import { initializeIDEConnection } from "services";
 import { createMuiTheme } from "theme";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
   const [showStorylineChartModal, setShowStorylineChartModal] = useState(false);
   const { handleChangeAnalyzedData } = useAnalayzedData();
-  const { filteredData, nextCommitId, isLastPage } = useDataStore((state) => ({
-    filteredData: state.filteredData,
-    nextCommitId: state.nextCommitId,
-    isLastPage: state.isLastPage,
-  }));
+  const filteredData = useDataStore((state) => state.filteredData);
 
   const { handleChangeBranchList } = useBranchStore();
   const { handleGithubInfo, repo } = useGithubInfo();
@@ -56,7 +51,7 @@ const App = () => {
   };
 
   useEffect(() => {
-    if (initRef.current === false) {
+    if (!initRef.current) {
       const callbacks: IDESentEvents = {
         handleChangeAnalyzedData: (payload) => handleChangeAnalyzedData(payload),
         handleChangeBranchList,
@@ -68,17 +63,7 @@ const App = () => {
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, handleGithubInfo, setLoading]);
 
-  const handleLoadMore = () => {
-    if (loading || isLastPage) return;
-
-    setLoading(true);
-    sendFetchAnalyzedDataCommand({
-      commitCountPerPage: COMMIT_COUNT_PER_PAGE,
-      lastCommitId: nextCommitId,
-    });
-  };
-
-  if (loading) {
+  if (loading && filteredData.length === 0) {
     return (
       <BounceLoader
         color={THEME_INFO[theme as keyof typeof THEME_INFO].colors.primary}
@@ -116,22 +101,10 @@ const App = () => {
       </div>
       <div>
         {filteredData.length !== 0 ? (
-          <>
-            <div className="middle-container">
-              <VerticalClusterList />
-              <Statistics />
-            </div>
-            <div className="load-more-container">
-              <button
-                type="button"
-                className="load-more-button"
-                onClick={handleLoadMore}
-                disabled={isLastPage || loading}
-              >
-                {loading ? "Loading..." : isLastPage ? "No More Commits" : "Load More"}
-              </button>
-            </div>
-          </>
+          <div className="middle-container">
+            <VerticalClusterList />
+            <Statistics />
+          </div>
         ) : (
           <div className="no-commits-container">
             <MonoLogo />

packages/view/src/components/Common/Author/Author.tsx

@@ -1,13 +1,12 @@
 import { Tooltip, Avatar } from "@mui/material";
 
 import type { AuthorInfo } from "types";
-
 import { GITHUB_URL } from "constants/constants";
 
 import { AVATAR_STYLE, TOOLTIP_STYLE } from "./Author.const";
 
-const isGitHubUser = (src: string): boolean => {
-  return src.startsWith(GITHUB_URL);
+const isGitHubUser = (src: string | undefined): boolean => {
+  return Boolean(src?.startsWith(GITHUB_URL));
 };
 
 const getGitHubProfileUrl = (username: string): string => {
@@ -42,6 +41,17 @@ const StaticAvatar = ({ name, src }: AuthorInfo) => {
 };
 
 const AvatarComponent = ({ name, src }: AuthorInfo) => {
+  if (!src) {
+    return (
+      <Avatar
+        alt={name}
+        sx={AVATAR_STYLE}
+      >
+        {name.charAt(0).toUpperCase()}
+      </Avatar>
+    );
+  }
+
   return isGitHubUser(src) ? (
     <ClickableAvatar
       name={name}

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx

@@ -222,8 +222,8 @@ const AuthorBarChart = () => {
       if (!d?.name) return null;
 
       try {
-        const profileImgSrc: string = await getAuthorProfileImgSrc(d.name).then((res: AuthorInfo) => res.src);
-        return { name: d.name, src: profileImgSrc };
+        const profileImgSrc: string | undefined = await getAuthorProfileImgSrc(d.name).then((res: AuthorInfo) => res.src);
+        return { name: d.name, src: profileImgSrc ?? "" };
       } catch (error) {
         console.warn(`Failed to load profile image for ${d.name}:`, error);
         return null;

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -8,8 +8,7 @@
   padding-right: 10px;
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  overflow: hidden;
 }
 
 .cluster-summary {

packages/view/src/components/VerticalClusterList/Summary/Summary.tsx

@@ -15,12 +15,12 @@ import { CLUSTER_HEIGHT, DETAIL_HEIGHT, NODE_GAP } from "../ClusterGraph/Cluster
 import { usePreLoadAuthorImg } from "./Summary.hook";
 import { getInitData, getClusterIds, getClusterById, getCommitLatestTag } from "./Summary.util";
 import { Content } from "./Content";
-import type { ClusterRowProps } from "./Summary.type";
+import type { ClusterRowProps, SummaryProps } from "./Summary.type";
 
 const COLLAPSED_ROW_HEIGHT = CLUSTER_HEIGHT + NODE_GAP * 2;
 const EXPANDED_ROW_HEIGHT = DETAIL_HEIGHT + COLLAPSED_ROW_HEIGHT;
 
-const Summary = () => {
+const Summary = ({ onLoadMore, isLoadingMore, enabled, isLastPage }: SummaryProps) => {
   const [filteredData, selectedData, toggleSelectedData] = useDataStore(
     useShallow((state) => [state.filteredData, state.selectedData, state.toggleSelectedData])
   );
@@ -31,17 +31,80 @@ const Summary = () => {
   const listRef = useRef<List>(null);
   const clusterSizes = getClusterSizes(filteredData);
 
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const isObservingRef = useRef(false);
+
+  // Create IntersectionObserver once and reuse it
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isLoadingMore && enabled) {
+          onLoadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: "100px",
+        threshold: 0.1,
+      }
+    );
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      isObservingRef.current = false;
+    };
+  }, [enabled, isLoadingMore, onLoadMore]);
+
+  // Infinite scroll: Observe sentinel when it's rendered
+  const handleRowsRendered = ({ stopIndex }: { startIndex: number; stopIndex: number }) => {
+    if (isSentinelRow(stopIndex) && sentinelRef.current && enabled && observerRef.current) {
+      if (!isObservingRef.current) {
+        observerRef.current.observe(sentinelRef.current);
+        isObservingRef.current = true;
+      }
+    }
+  };
+
+  // Unobserve when sentinel is no longer needed
+  useEffect(() => {
+    if (isLastPage && observerRef.current && isObservingRef.current) {
+      observerRef.current.disconnect();
+      isObservingRef.current = false;
+    }
+  }, [isLastPage]);
+
+  const isSentinelRow = (index: number) => !isLastPage && index === clusters.length;
+
   const onClickClusterSummary = (clusterId: number) => () => {
     const selected = getClusterById(filteredData, clusterId);
     toggleSelectedData(selected, clusterId);
   };
 
   const getRowHeight = ({ index }: { index: number }) => {
+    if (isSentinelRow(index)) {
+      return 10;
+    }
+
     const cluster = clusters[index];
     return selectedClusterIds.includes(cluster.clusterId) ? EXPANDED_ROW_HEIGHT : COLLAPSED_ROW_HEIGHT;
   };
 
   const rowRenderer = (props: ListRowProps) => {
+    // Render sentinel element
+    if (isSentinelRow(props.index)) {
+      return (
+        <div
+          ref={sentinelRef}
+          key={props.index}
+          style={props.style}
+        />
+      );
+    }
+
     const cluster = clusters[props.index];
     const isExpanded = selectedClusterIds.includes(cluster.clusterId);
     const { key, ...restProps } = props;
@@ -80,9 +143,10 @@ const Summary = () => {
             ref={listRef}
             width={width}
             height={height}
-            rowCount={clusters.length}
+            rowCount={isLastPage ? clusters.length : clusters.length + 1}
             rowHeight={getRowHeight}
             rowRenderer={rowRenderer}
+            onRowsRendered={handleRowsRendered}
             overscanRowCount={15}
             className="cluster-summary"
           />

packages/view/src/components/VerticalClusterList/Summary/Summary.type.ts

@@ -26,7 +26,7 @@ export type Cluster = {
   clusterTags: string[];
 };
 
-export type AuthSrcMap = Record<string, string>;
+export type AuthSrcMap = Record<string, string | undefined>;
 
 export type ClusterRowProps = Omit<ListRowProps, "key"> & {
   cluster: Cluster;
@@ -38,3 +38,10 @@ export type ClusterRowProps = Omit<ListRowProps, "key"> & {
   detailRef: React.RefObject<HTMLDivElement>;
   selectedClusterIds: number[];
 };
+
+export type SummaryProps = {
+  onLoadMore: () => void;
+  isLoadingMore: boolean;
+  isLastPage: boolean;
+  enabled: boolean;
+};

packages/view/src/components/VerticalClusterList/Summary/Summary.util.ts

@@ -1,5 +1,8 @@
+import md5 from "md5";
+
 import type { GlobalProps, CommitNode, ClusterNode, SelectedDataProps } from "types";
 import { getAuthorProfileImgSrc } from "utils/author";
+import { GRAVATA_URL } from "constants/constants";
 
 import type { AuthSrcMap, Cluster } from "./Summary.type";
 
@@ -140,12 +143,29 @@ function getAuthorNames(data: ClusterNode[]) {
 
 export async function getAuthSrcMap(data: ClusterNode[]) {
   const authorNames = getAuthorNames(data);
-  const promiseAuthSrc = authorNames.map(getAuthorProfileImgSrc);
+
+  // 각 author에 대해 이미지 로드 시도, 실패 시 fallback 제공
+  const promiseAuthSrc = authorNames.map((name) =>
+    getAuthorProfileImgSrc(name).catch(() => ({
+      name,
+      src: `${GRAVATA_URL}/${md5(name)}?d=identicon&f=y`,
+    }))
+  );
+
   const authSrcs = await Promise.all(promiseAuthSrc);
   const authSrcMap: AuthSrcMap = {};
+
   authSrcs.forEach((authorInfo) => {
     const { name, src } = authorInfo;
     authSrcMap[name] = src;
   });
+
+  // 혹시 누락된 author가 있다면 fallback 제공
+  authorNames.forEach((name) => {
+    if (!authSrcMap[name]) {
+      authSrcMap[name] = `${GRAVATA_URL}/${md5(name)}?d=identicon&f=y`;
+    }
+  });
+
   return authSrcMap;
 }

packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx

@@ -1,13 +1,41 @@
-import { useDataStore } from "store";
+import { useCallback, useEffect, useState } from "react";
+
+import { useDataStore, useLoadingStore } from "store";
 import { FilteredAuthors } from "components/FilteredAuthors";
 import { SelectedClusterGroup } from "components/SelectedClusterGroup";
+import { sendFetchAnalyzedDataCommand } from "services";
+import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
 
 import { Summary } from "./Summary";
 
 import "./VerticalClusterList.scss";
 
 const VerticalClusterList = () => {
   const selectedData = useDataStore((state) => state.selectedData);
+  const { filteredData, nextCommitId, isLastPage } = useDataStore((state) => ({
+    filteredData: state.filteredData,
+    nextCommitId: state.nextCommitId,
+    isLastPage: state.isLastPage,
+  }));
+
+  const { loading } = useLoadingStore();
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  const handleLoadMore = useCallback(() => {
+    if (isLoadingMore || isLastPage) return;
+
+    setIsLoadingMore(true);
+    sendFetchAnalyzedDataCommand({
+      commitCountPerPage: COMMIT_COUNT_PER_PAGE,
+      lastCommitId: nextCommitId,
+    });
+  }, [isLoadingMore, isLastPage, nextCommitId]);
+
+  useEffect(() => {
+    if (!loading && isLoadingMore) {
+      setIsLoadingMore(false);
+    }
+  }, [loading, isLoadingMore]);
 
   return (
     <div className="vertical-cluster-list">
@@ -17,7 +45,12 @@ const VerticalClusterList = () => {
           <SelectedClusterGroup />
         </div>
       )}
-      <Summary />
+      <Summary
+        onLoadMore={handleLoadMore}
+        isLoadingMore={isLoadingMore}
+        isLastPage={isLastPage}
+        enabled={!isLastPage && !isLoadingMore && filteredData.length > 0}
+      />
     </div>
   );
 };

packages/view/src/constants/constants.ts

@@ -2,4 +2,4 @@ export const GITHUB_URL = "https://github.com";
 export const GRAVATA_URL = "https://www.gravatar.com/avatar";
 export const PRIMARY_COLOR_VARIABLE_NAME = "--color-primary";
 export const NODE_TYPES = ["COMMIT", "CLUSTER"] as const;
-export const COMMIT_COUNT_PER_PAGE = 10;
+export const COMMIT_COUNT_PER_PAGE = 20;