dapps lazy loading

lib/hooks/useLazyRenderedList.tsx

@@ -5,12 +5,12 @@ import { useInView } from 'react-intersection-observer';
 const STEP = 10;
 const MIN_ITEMS_NUM = 50;
 
-export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean) {
-  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(MIN_ITEMS_NUM);
+export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean, minItemsNum: number = MIN_ITEMS_NUM) {
+  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(minItemsNum);
   const { ref, inView } = useInView({
     rootMargin: '200px',
     triggerOnce: false,
-    skip: !isEnabled || list.length <= MIN_ITEMS_NUM,
+    skip: !isEnabled || list.length <= minItemsNum,
   });
 
   React.useEffect(() => {

ui/marketplace/MarketplaceList.tsx

-import { Grid } from '@chakra-ui/react';
+import { Grid, Box } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { MouseEvent } from 'react';
 
 import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
+import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 import * as mixpanel from 'lib/mixpanel/index';
 
 import EmptySearchResult from './EmptySearchResult';
@@ -30,6 +31,8 @@ const MarketplaceList = ({
   apps, showAppInfo, favoriteApps, onFavoriteClick, isLoading, selectedCategoryId,
   onAppClick, showContractList, userRatings, rateApp, isSendingRating, isRatingLoading, canRate,
 }: Props) => {
+  const { cutRef, renderedItemsNum } = useLazyRenderedList(apps, !isLoading, 16);
+
   const handleInfoClick = useCallback((id: string) => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Discovery view' });
     showAppInfo(id);
@@ -40,6 +43,7 @@ const MarketplaceList = ({
   }, [ onFavoriteClick ]);
 
   return apps.length > 0 ? (
+    <>
       <Grid
         templateColumns={{
           md: 'repeat(auto-fill, minmax(230px, 1fr))',
@@ -48,7 +52,7 @@ const MarketplaceList = ({
         autoRows="1fr"
         gap={{ base: '16px', md: '24px' }}
       >
-      { apps.map((app, index) => (
+        { apps.slice(0, renderedItemsNum).map((app, index) => (
           <MarketplaceAppCard
             key={ app.id + (isLoading ? index : '') }
             onInfoClick={ handleInfoClick }
@@ -76,6 +80,8 @@ const MarketplaceList = ({
           />
         )) }
       </Grid>
+      <Box ref={ cutRef } h={ 0 }/>
+    </>
   ) : (
     <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
   );