feat(core): add release events pagination

sanity-io · Dec 11, 2024 · 8cd2e0c · 8cd2e0c
1 parent 147e3ad
commit 8cd2e0c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseActivityList.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseActivityList.tsx
@@ -4,17 +4,21 @@
 import {Box} from '@sanity/ui'
 import {useVirtualizer} from '@tanstack/react-virtual'
 import {AnimatePresence} from 'framer-motion'
-import {useRef} from 'react'
+import {useEffect, useRef} from 'react'
 import {styled} from 'styled-components'
 
+import {LoadingBlock} from '../../../components/loadingBlock/LoadingBlock'
 import {
   isAddDocumentToReleaseEvent,
   isDiscardDocumentFromReleaseEvent,
   type ReleaseEvent,
 } from './activity/types'
 import {ReleaseActivityListItem} from './ReleaseActivityListItem'
 
-const estimateSize = (event: ReleaseEvent) => {
+const estimateSize = (event: ReleaseEvent | undefined) => {
+  if (!event) {
+    return 40 // Is the loader row
+  }
   if (isAddDocumentToReleaseEvent(event) || isDiscardDocumentFromReleaseEvent(event)) {
     return 70
   }
@@ -24,25 +28,43 @@ const VirtualContainer = styled(Box)`
   height: 100%;
   overflow: scroll;
 `
+
+interface ReleaseActivityListProps {
+  events: ReleaseEvent[]
+  releaseTitle: string
+  releaseId: string
+  hasMore: boolean
+  loadMore: () => void
+  isLoading: boolean
+}
 export const ReleaseActivityList = ({
   events,
   releaseTitle,
   releaseId,
-}: {
-  events: ReleaseEvent[]
-  releaseTitle: string
-  releaseId: string
-}) => {
+  hasMore,
+  loadMore,
+  isLoading,
+}: ReleaseActivityListProps) => {
   const virtualizerContainerRef = useRef<HTMLDivElement | null>(null)
 
   const virtualizer = useVirtualizer({
-    count: events.length,
+    // If we have more events, or the events are loading, we add a loader row at the end
+    count: hasMore || isLoading ? events.length + 1 : events.length,
     getScrollElement: () => virtualizerContainerRef.current,
     estimateSize: (i) => estimateSize(events[i]),
     overscan: 10,
-    paddingEnd: 50,
+    paddingEnd: 24,
   })
 
+  const virtualItems = virtualizer.getVirtualItems()
+
+  useEffect(() => {
+    const lastItem = virtualItems.at(-1)
+    if (!lastItem) return
+    if (lastItem.index >= events.length - 1 && hasMore) {
+      loadMore()
+    }
+  }, [events.length, hasMore, loadMore, virtualItems])
   return (
     <VirtualContainer id="virtualizer-container" ref={virtualizerContainerRef} paddingX={3}>
       <div
@@ -55,6 +77,8 @@ export const ReleaseActivityList = ({
         <AnimatePresence initial={false}>
           {virtualizer.getVirtualItems().map((virtualRow) => {
             const event = events[virtualRow.index]
+            const isLoaderRow = !event
+
             return (
               <div
                 key={virtualRow.key}
@@ -68,11 +92,17 @@ export const ReleaseActivityList = ({
                   transform: `translateY(${virtualRow.start}px)`,
                 }}
               >
-                <ReleaseActivityListItem
-                  event={event}
-                  releaseId={releaseId}
-                  releaseTitle={releaseTitle}
-                />
+                {isLoaderRow ? (
+                  <Box paddingY={4}>
+                    <LoadingBlock fill />
+                  </Box>
+                ) : (
+                  <ReleaseActivityListItem
+                    event={event}
+                    releaseId={releaseId}
+                    releaseTitle={releaseTitle}
+                  />
+                )}
               </div>
             )
           })}

diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx
@@ -62,6 +62,9 @@ export function ReleaseDashboardActivityPanel({
                   events={activity.events}
                   releaseTitle={release.metadata.title || release.name}
                   releaseId={release._id}
+                  hasMore={activity.hasMore}
+                  loadMore={activity.loadMore}
+                  isLoading={activity.loading}
                 />
               </MotionFlex>
             </Resizable>

diff --git a/packages/sanity/src/core/releases/tool/detail/activity/useReleaseActivity.ts b/packages/sanity/src/core/releases/tool/detail/activity/useReleaseActivity.ts
@@ -14,6 +14,7 @@ export interface ReleaseActivity {
   loading: boolean
   error: null | Error
   loadMore: () => void
+  hasMore: boolean
 }
 
 export function useReleaseActivity({
@@ -36,7 +37,10 @@ export function useReleaseActivity({
     () => getReleaseActivityEvents({client, releaseId}),
     [client, releaseId],
   )
-  const {events, loading, error} = useObservable(events$, RELEASE_ACTIVITY_INITIAL_VALUE)
+  const {events, loading, error, nextCursor} = useObservable(
+    events$,
+    RELEASE_ACTIVITY_INITIAL_VALUE,
+  )
 
   const {editEvents$} = useMemo(
     () => getReleaseEditEvents({client, releaseId, releasesState$}),
@@ -98,6 +102,7 @@ export function useReleaseActivity({
 
   return {
     events: allEvents,
+    hasMore: Boolean(nextCursor),
     loadMore,
     loading,
     error,