replace studio assets pagination with infinite scroll

packages/ui/src/components/editor/panels/Assets/container/index.tsx

@@ -23,8 +23,8 @@ Original Code is the Ethereal Engine team.
 All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
 Ethereal Engine. All Rights Reserved.
 */
-import { clone, debounce, isEmpty } from 'lodash'
-import React, { useEffect, useRef } from 'react'
+import { clone, debounce } from 'lodash'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { NotificationService } from '@etherealengine/client-core/src/common/services/NotificationService'
@@ -59,13 +59,15 @@ import { twMerge } from 'tailwind-merge'
 import Button from '../../../../../primitives/tailwind/Button'
 import Input from '../../../../../primitives/tailwind/Input'
 import LoadingView from '../../../../../primitives/tailwind/LoadingView'
-import { TablePagination } from '../../../../../primitives/tailwind/Table'
 import Text from '../../../../../primitives/tailwind/Text'
 import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 import { ContextMenu } from '../../../../tailwind/ContextMenu'
+import InfiniteScroll from '../../../../tailwind/InfiniteScroll'
 import DeleteFileModal from '../../Files/browserGrid/DeleteFileModal'
 import { FileIcon } from '../../Files/icon'
 
+const ASSETS_PAGE_LIMIT = 10
+
 type Category = {
   name: string
   object: object
@@ -233,10 +235,6 @@ const ResourceFile = (props: {
   )
 }
 
-export const MenuDivider = () => {
-  return <div className="my-2 flex w-full border-b border-theme-primary" />
-}
-
 interface MetadataTableProps {
   rows: MetadataTableRowProps[]
 }
@@ -412,11 +410,13 @@ const AssetPanel = () => {
   const searchedStaticResources = useHookstate<StaticResourceType[]>([])
   const searchText = useHookstate('')
   const originalPath = useMutableState(EditorState).projectName.value
-  const staticResourcesPagination = useHookstate({ totalPages: -1, currentPage: 0 })
+  const staticResourcesPagination = useHookstate({ total: 0, skip: 0 })
   const assetsPreviewContext = useHookstate({ selectAssetURL: '' })
   const parentCategories = useHookstate<Category[]>([])
 
-  const mapCategories = () => categories.set(mapCategoriesHelper(collapsedCategories.value))
+  const mapCategories = useCallback(() => {
+    categories.set(mapCategoriesHelper(collapsedCategories.value))
+  }, [categories, collapsedCategories])
   useEffect(mapCategories, [collapsedCategories])
 
   useEffect(() => {
@@ -426,8 +426,8 @@ const AssetPanel = () => {
   }, [categories, selectedCategory])
 
   const staticResourcesFindApi = () => {
-    loading.set(true)
     searchTimeoutCancelRef.current?.()
+    loading.set(true)
 
     const debouncedSearchQuery = debounce(() => {
       const tags = selectedCategory.value
@@ -458,17 +458,20 @@ const AssetPanel = () => {
             }
           : undefined,
         $sort: { mimeType: 1 },
-        $skip: staticResourcesPagination.currentPage.value * 10
+        $limit: ASSETS_PAGE_LIMIT,
+        $skip: Math.min(staticResourcesPagination.skip.value, staticResourcesPagination.total.value)
       } as StaticResourceQuery
 
       Engine.instance.api
         .service(staticResourcePath)
         .find({ query })
         .then((resources) => {
-          searchedStaticResources.set(resources.data)
-          staticResourcesPagination.merge({ totalPages: Math.ceil(resources.total / 10) })
-        })
-        .then(() => {
+          if (staticResourcesPagination.skip.value > 0) {
+            searchedStaticResources.merge(resources.data)
+          } else {
+            searchedStaticResources.set(resources.data)
+          }
+          staticResourcesPagination.merge({ total: resources.total })
           loading.set(false)
         })
     }, 500)
@@ -477,26 +480,17 @@ const AssetPanel = () => {
     searchTimeoutCancelRef.current = debouncedSearchQuery.cancel
   }
 
-  useEffect(() => {
-    staticResourcesFindApi()
-  }, [searchText, selectedCategory, staticResourcesPagination.currentPage])
+  useEffect(() => staticResourcesFindApi(), [searchText, selectedCategory, staticResourcesPagination.skip])
 
   const ResourceItems = () => {
-    if (loading.value) {
-      return (
-        <div className="col-start-2 flex items-center justify-center">
-          <LoadingView className="h-4 w-4" spinnerOnly />
-        </div>
-      )
-    }
     return (
       <>
-        {isEmpty(searchedStaticResources.value) && (
+        {searchedStaticResources.length === 0 && (
           <div className="col-start-2 flex h-full w-full items-center justify-center text-white">
             {t('editor:layout.scene-assets.no-search-results')}
           </div>
         )}
-        {!isEmpty(searchedStaticResources.value) && (
+        {searchedStaticResources.length > 0 && (
           <>
             {searchedStaticResources.value.map((resource) => (
               <ResourceFile
@@ -534,7 +528,7 @@ const AssetPanel = () => {
 
   const handleSelectCategory = (category: Category) => {
     selectedCategory.set(clone(category))
-    staticResourcesPagination.currentPage.set(0)
+    staticResourcesPagination.skip.set(0)
     !category.isLeaf && collapsedCategories[category.name].set(!category.collapsed)
   }
 
@@ -615,16 +609,16 @@ const AssetPanel = () => {
           onSelectCategory={handleSelectCategory}
         />
         <div className="flex h-full w-full flex-col overflow-auto">
-          <div className="grid flex-1 grid-cols-3 gap-2 overflow-auto p-2">
-            <ResourceItems />
-          </div>
-          <div className="mx-auto mb-10">
-            <TablePagination
-              totalPages={staticResourcesPagination.totalPages.value}
-              currentPage={staticResourcesPagination.currentPage.value}
-              onPageChange={(newPage) => staticResourcesPagination.merge({ currentPage: newPage })}
-            />
-          </div>
+          <InfiniteScroll
+            disableEvent={staticResourcesPagination.skip.value >= staticResourcesPagination.total.value}
+            onScrollBottom={() => staticResourcesPagination.skip.set((prevSkip) => prevSkip + ASSETS_PAGE_LIMIT)}
+          >
+            <div className="grid flex-1 grid-cols-3 gap-2 overflow-auto p-2">
+              <ResourceItems />
+            </div>
+            {loading.value && <LoadingView spinnerOnly className="h-6 w-6" />}
+          </InfiniteScroll>
+          <div className="mx-auto mb-10" />
         </div>
         {/* <div className="w-[200px] bg-[#222222] p-2">TODO: add preview functionality</div> */}
       </div>

packages/ui/src/components/tailwind/InfiniteScroll/index.tsx

@@ -0,0 +1,68 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React, { useEffect, useRef } from 'react'
+
+interface IInfiniteScrollProps {
+  onScrollBottom: () => void
+  children: React.ReactNode
+  disableEvent?: boolean
+  threshold?: number
+  className?: string
+}
+
+export default function InfiniteScroll({
+  onScrollBottom,
+  threshold = 1,
+  disableEvent,
+  children
+}: IInfiniteScrollProps) {
+  const observerRef = useRef<any>(null)
+
+  const onIntersection = (entries) => {
+    if (entries[0].isIntersecting && !disableEvent) {
+      onScrollBottom()
+    }
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(onIntersection, { threshold })
+
+    if (observerRef.current) {
+      observer.observe(observerRef.current)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [disableEvent])
+
+  return (
+    <div style={{ all: 'unset' }}>
+      {children}
+      <span ref={observerRef} style={{ all: 'unset' }} />
+    </div>
+  )
+}