feat: first attempt to virtualize the catalog

webapp/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0-development",
   "dependencies": {
     "@dcl/crypto": "^3.0.0",
-    "@dcl/schemas": "^6.15.0",
+    "@dcl/schemas": "^6.18.0",
     "@dcl/ui-env": "^1.2.0",
     "@ethersproject/providers": "^5.6.2",
     "classnames": "^2.3.1",
@@ -24,13 +24,14 @@
     "react": "^17.0.2",
     "react-countup": "^6.2.0",
     "react-dom": "^17.0.2",
+    "react-intersection-observer": "^9.4.3",
     "react-lazy-load-image-component": "^1.5.6",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
-    "react-virtualized-auto-sizer": "^1.0.9",
-    "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8",
+    "react-virtualized-auto-sizer": "^1.0.17",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
     "recharts": "^2.3.2",
     "redux": "^4.1.1",
     "redux-logger": "^3.0.6",

webapp/src/components/AccountSidebar/AccountSidebar.css

@@ -9,6 +9,7 @@
   background-color: var(--card);
   border-radius: 10px;
   padding-bottom: 12px;
+  margin-right: 0px;
 }
 
 .AccountSidebar ul.Menu > .MenuItem {
@@ -97,3 +98,12 @@
 .AccountSidebar ul.Menu.other-account-menu {
   padding-bottom: 0;
 }
+
+.AccountSidebar {
+  position: sticky;
+  top: 0;
+  overflow: auto;
+  height: calc(
+    100vh - 197px
+  ); /* 64px navbar + 65 navigation + 12 margin + 56 footer = 197  */
+}

webapp/src/components/AccountSidebar/CurrentAccountSidebar/CurrentAccountSidebar.tsx

@@ -77,6 +77,7 @@ const CurrentAccountSidebar = ({ section, onBrowse }: Props) => (
     </Menu>
     <AssetFilters
       defaultCollapsed={{
+        [AssetFilter.Status]: true,
         [AssetFilter.Rarity]: true,
         [AssetFilter.Price]: true,
         [AssetFilter.Collection]: true,
@@ -85,7 +86,7 @@ const CurrentAccountSidebar = ({ section, onBrowse }: Props) => (
         [AssetFilter.BodyShape]: true,
         [AssetFilter.Network]: true,
         [AssetFilter.OnSale]: false,
-        [AssetFilter.More]: false,
+        [AssetFilter.More]: false
       }}
     />
   </>

webapp/src/components/AssetBrowse/AssetBrowse.css

@@ -1,3 +1,12 @@
+.AssetBrowse.dcl.page {
+  margin-top: 12px;
+}
+
+.AssetBrowse .AssetsList .ui.cards {
+  height: 100%;
+  width: 100%;
+}
+
 .AssetBrowse .Row .right.Column {
   position: relative;
   max-width: calc(100% - 256px);
@@ -11,13 +20,6 @@
   max-width: none;
 }
 
-.AssetBrowse .ui.cards {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-}
-
 .AssetBrowse .ui.cards {
   min-height: 150px;
   margin: 0;
@@ -35,7 +37,6 @@
   background: var(--background);
   opacity: 0.6;
   z-index: 1;
-  margin-top: -20px;
 }
 
 .AssetBrowse .load-more {
@@ -100,7 +101,8 @@
 
 .AssetBrowse .sidebar {
   margin-right: 20px;
-  width: var(--sidebar-width);
+  width: calc(var(--sidebar-width) + 10px);
+  background-color: var(--background);
 }
 
 .AssetBrowse.fullscreen .NFTFilters {
@@ -143,6 +145,19 @@
   .AssetBrowse .overlay {
     margin-top: 0;
   }
+  .AssetBrowse .ui.cards {
+    display: flex;
+  }
+  .AssetBrowse .ui.cards > div {
+    width: 48%;
+  }
+  .AssetBrowse .ui.cards .content.catalog {
+    padding: 10px 10px 18px 10px;
+    display: flex;
+  }
+  .AssetBrowse .ui.cards .CatalogItemInformation {
+    margin-top: 6px;
+  }
   .AssetBrowse .ui.cards,
   .AssetBrowse .ui.cards > .ui.card {
     margin-left: 0;

webapp/src/components/AssetCard/AssetCard.container.ts

@@ -10,7 +10,11 @@ import { locations } from '../../modules/routing/locations'
 import { getOpenRentalId } from '../../modules/rental/utils'
 import { getRentalById } from '../../modules/rental/selectors'
 import { getIsFavoritesEnabled } from '../../modules/features/selectors'
-import { getPageName } from '../../modules/routing/selectors'
+import {
+  getPageName,
+  getSortBy,
+  getWearablesUrlParams
+} from '../../modules/routing/selectors'
 import { PageName } from '../../modules/routing/types'
 import { MapStateProps, OwnProps, MapDispatchProps } from './AssetCard.types'
 import AssetCard from './AssetCard'
@@ -30,6 +34,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     ? getRentalById(state, openRentalId)
     : null
 
+  const { minPrice, maxPrice } = getWearablesUrlParams(state)
+
   return {
     price,
     showListedTag:
@@ -41,7 +47,12 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
       : false,
     rental: rentalOfNFT,
     showRentalChip: rentalOfNFT !== null && pageName === PageName.ACCOUNT,
-    isFavoritesEnabled: getIsFavoritesEnabled(state)
+    isFavoritesEnabled: getIsFavoritesEnabled(state),
+    sortBy: getSortBy(state),
+    appliedFilters: {
+      minPrice,
+      maxPrice
+    }
   }
 }