[UI/UX] Re-implement Library Pagination

package.json

@@ -155,6 +155,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.16.7",
+    "react-infinite-scroll-hook": "^4.0.4",
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "recharts": "^2.1.14",

src/frontend/hooks/usePagination.ts

@@ -0,0 +1,54 @@
+import useInfiniteScroll from 'react-infinite-scroll-hook'
+import { useState, useEffect, useCallback } from 'react'
+
+// TODO: improvement suggestion: paginate in backend
+export default function usePagination<T>(
+  list: T[],
+  { rpp, infinite }: { rpp: number; infinite?: boolean }
+) {
+  const loadPage = useCallback(
+    (page: number) => {
+      const offset = rpp * (page - 1)
+      return list.slice(offset, offset + rpp)
+    },
+    [list]
+  )
+
+  const [paginatedList, setPaginatedList] = useState<T[]>(() => loadPage(1))
+  const [page, setPage] = useState(1)
+
+  useEffect(() => {
+    setPage(1)
+    setPaginatedList(loadPage(1))
+  }, [list, loadPage])
+
+  const hasMore = paginatedList.length !== list.length
+
+  const loadMore = useCallback(() => {
+    if (!hasMore) {
+      return
+    }
+
+    setPage(page + 1)
+    const newListPage = loadPage(page + 1)
+    if (infinite) {
+      setPaginatedList([...paginatedList, ...newListPage])
+    } else {
+      setPaginatedList(newListPage)
+    }
+  }, [hasMore, page, paginatedList, loadPage])
+
+  const [sentryRef] = useInfiniteScroll({
+    loading: false,
+    hasNextPage: hasMore,
+    onLoadMore: loadMore
+  })
+
+  return {
+    loadMore: loadMore,
+    page,
+    paginatedList,
+    hasMore,
+    infiniteScrollSentryRef: sentryRef
+  }
+}

src/frontend/screens/Library/components/GamesList/index.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext } from 'react'
 import { GameInfo, Runner, SideloadGame } from 'common/types'
 import cx from 'classnames'
 import GameCard from '../GameCard'
 import ContextProvider from 'frontend/state/ContextProvider'
 import { useTranslation } from 'react-i18next'
+import usePaginatedList from 'frontend/hooks/usePagination'
 
 interface Props {
   library: (GameInfo | SideloadGame)[]
@@ -26,66 +27,58 @@ const GamesList = ({
   onlyInstalled = false,
   isRecent = false
 }: Props): JSX.Element => {
-  const { gameUpdates, showNonAvailable } = useContext(ContextProvider)
+  const { gameUpdates } = useContext(ContextProvider)
   const { t } = useTranslation()
-  const [gameCards, setGameCards] = useState<JSX.Element[]>([])
 
-  useEffect(() => {
-    let mounted = true
-
-    const createGameCards = async () => {
-      if (!library.length) {
-        return
-      }
-      const resolvedLibrary = library.map(async (gameInfo) => {
-        const { app_name, is_installed, runner } = gameInfo
-
-        let is_dlc = false
-        if (gameInfo.runner !== 'sideload') {
-          is_dlc = gameInfo.install.is_dlc ?? false
-        }
-
-        if (is_dlc) {
-          return null
-        }
-        if (!is_installed && onlyInstalled) {
-          return null
-        }
+  const { infiniteScrollSentryRef, paginatedList, hasMore } = usePaginatedList(
+    library,
+    {
+      rpp: 10,
+      infinite: true
+    }
+  )
 
-        const hasUpdate = is_installed && gameUpdates?.includes(app_name)
-        return (
-          <GameCard
-            key={app_name}
-            hasUpdate={hasUpdate}
-            buttonClick={() => {
-              if (gameInfo.runner !== 'sideload')
-                handleGameCardClick(app_name, runner, gameInfo)
-            }}
-            forceCard={layout === 'grid'}
-            isRecent={isRecent}
-            gameInfo={gameInfo}
-          />
-        )
-      })
-      const gameCardElements = (await Promise.all(
-        resolvedLibrary
-      )) as JSX.Element[]
+  const renderGameInfo = (gameInfo: GameInfo | SideloadGame) => {
+    const { app_name, is_installed, runner } = gameInfo
 
-      if (mounted) {
-        setGameCards(gameCardElements)
-      }
+    let is_dlc = false
+    if (gameInfo.runner !== 'sideload') {
+      is_dlc = gameInfo.install.is_dlc ?? false
     }
 
-    createGameCards()
+    if (is_dlc) {
+      return null
+    }
 
-    return () => {
-      mounted = false
+    if (!is_installed && onlyInstalled) {
+      return null
     }
-  }, [library, onlyInstalled, layout, gameUpdates, isRecent, showNonAvailable])
+
+    const hasUpdate = is_installed && gameUpdates?.includes(app_name)
+    return (
+      <GameCard
+        key={app_name}
+        hasUpdate={hasUpdate}
+        buttonClick={() => {
+          if (gameInfo.runner !== 'sideload')
+            handleGameCardClick(app_name, runner, gameInfo)
+        }}
+        forceCard={layout === 'grid'}
+        isRecent={isRecent}
+        gameInfo={gameInfo}
+      />
+    )
+  }
 
   return (
     <div
-      style={!library.length ? { backgroundColor: 'transparent' } : {}}
+      style={
+        !library.length
+          ? {
+              backgroundColor: 'transparent'
+            }
+          : {}
+      }
       className={cx({
         gameList: layout === 'grid',
         gameListLayout: layout === 'list',
@@ -100,7 +93,15 @@ const GamesList = ({
           <span>{t('wine.actions', 'Action')}</span>
         </div>
       )}
-      {!!library.length && gameCards}
+      {paginatedList.map((item) => {
+        return renderGameInfo(item)
+      })}
+      {hasMore && (
+        <div
+          ref={infiniteScrollSentryRef}
+          style={{ width: 100, height: 40, backgroundColor: 'transparent' }}
+        />
+      )}
     </div>
   )
 }

yarn.lock

@@ -6373,6 +6373,18 @@ react-i18next@^11.16.7:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
 
+react-infinite-scroll-hook@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-hook/-/react-infinite-scroll-hook-4.0.4.tgz#616e66ba1de6421f74cd37d652e5b8c26c886373"
+  integrity sha512-fCjG9xwCfnV9GcAHVz9rXGnLqO55fcYsbeshSxgEH2biF8fVFHmfzZrfX4iTzoOWO1Rrz5hxrK4bBcqL5fAy9Q==
+  dependencies:
+    react-intersection-observer-hook "^2.0.6"
+
+react-intersection-observer-hook@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer-hook/-/react-intersection-observer-hook-2.0.6.tgz#f7c416002c2ec8e763841849c666e650f010c034"
+  integrity sha512-NTx+4Qat1tS9Bn4CXa6YgmbxLGcxFttV94Us7ZUEZ4mIZD3XaCpnm6U/FU35c6cJOMIfc7UfSzpju69ckfmb+Q==
+
 react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"