fix: Load LW collections separetely from their items (#3200)

* fix: Load LW collections separetely from their items * fix: Loading of collection in CollectionDetailPage
decentraland · Oct 3, 2024 · 8c3a394 · 8c3a394
1 parent 73ab2d0
commit 8c3a394
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 128 deletions.
diff --git a/src/components/CollectionDetailPage/CollectionDetailPage.tsx b/src/components/CollectionDetailPage/CollectionDetailPage.tsx
@@ -438,11 +438,11 @@ export default function CollectionDetailPage({
   const HUGE_PAGE_SIZE = 5000 // TODO: Remove this ASAP and implement pagination
   return (
     <CollectionProvider id={collection?.id} itemsPage={1} itemsPageSize={HUGE_PAGE_SIZE}>
-      {({ isLoading: isLoadingCollectionData, items }) => (
+      {({ isLoadingCollection, isLoadingCollectionItems, items }) => (
         <LoggedInDetailPage
           className="CollectionDetailPage"
-          hasNavigation={!hasAccess && !isLoading && !isLoadingCollectionData}
-          isLoading={isLoading || isLoadingCollectionData}
+          hasNavigation={!hasAccess && !isLoading && !isLoadingCollection}
+          isLoading={isLoading || isLoadingCollection || isLoadingCollectionItems}
         >
           {hasAccess ? renderPage(items) : <NotFound />}
         </LoggedInDetailPage>

diff --git a/src/components/CollectionProvider/CollectionProvider.container.ts b/src/components/CollectionProvider/CollectionProvider.container.ts
@@ -31,8 +31,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     itemCurations,
     curation,
     isConnected: isConnected(state),
-    isLoading:
-      isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST) ||
+    isLoadingCollection: isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST),
+    isLoadingCollectionItems:
       isLoadingType(getLoadingItemCurations(state), FETCH_ITEM_CURATIONS_REQUEST) ||
       isLoadingType(getLoadingItems(state), FETCH_COLLECTION_ITEMS_REQUEST)
   }

diff --git a/src/components/CollectionProvider/CollectionProvider.tsx b/src/components/CollectionProvider/CollectionProvider.tsx
@@ -87,7 +87,8 @@ export default class CollectionProvider extends React.PureComponent<Props> {
       paginatedItems,
       curation,
       itemCurations,
-      isLoading,
+      isLoadingCollection,
+      isLoadingCollectionItems,
       children,
       onFetchCollectionItems
     } = this.props
@@ -102,7 +103,8 @@ export default class CollectionProvider extends React.PureComponent<Props> {
           paginatedCollections,
           curation,
           itemCurations,
-          isLoading,
+          isLoadingCollection,
+          isLoadingCollectionItems,
           onFetchCollectionItemsPages: onFetchCollectionItems
         })}
       </>

diff --git a/src/components/CollectionProvider/CollectionProvider.types.ts b/src/components/CollectionProvider/CollectionProvider.types.ts
@@ -22,7 +22,8 @@ export type Props = {
   fetchCollectionItemsOptions?: FetchCollectionItemsParams
   curation: CollectionCuration | null
   itemCurations: ItemCuration[] | null
-  isLoading: boolean
+  isLoadingCollection: boolean
+  isLoadingCollectionItems: boolean
   isConnected: boolean
   children: ({
     collection,
@@ -31,7 +32,8 @@ export type Props = {
     curation,
     itemCurations,
     initialPage,
-    isLoading,
+    isLoadingCollection,
+    isLoadingCollectionItems,
     onFetchCollectionItemsPages
   }: {
     collection: Collection | null
@@ -41,7 +43,8 @@ export type Props = {
     curation: CollectionCuration | null
     itemCurations: ItemCuration[] | null
     initialPage: number
-    isLoading: boolean
+    isLoadingCollection: boolean
+    isLoadingCollectionItems: boolean
     onFetchCollectionItemsPages: typeof fetchCollectionItemsRequest
   }) => React.ReactNode
   onFetchCollection: typeof fetchCollectionRequest
@@ -51,7 +54,16 @@ export type Props = {
 
 export type MapStateProps = Pick<
   Props,
-  'id' | 'collection' | 'items' | 'isLoading' | 'isConnected' | 'curation' | 'itemCurations' | 'paginatedItems' | 'paginatedCollections'
+  | 'id'
+  | 'collection'
+  | 'items'
+  | 'isLoadingCollection'
+  | 'isLoadingCollectionItems'
+  | 'isConnected'
+  | 'curation'
+  | 'itemCurations'
+  | 'paginatedItems'
+  | 'paginatedCollections'
 >
 export type MapDispatchProps = Pick<Props, 'onFetchCollection' | 'onFetchCollectionItems'>
 export type MapDispatch = Dispatch<FetchCollectionRequestAction | FetchCollectionItemsRequestAction>

diff --git a/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx b/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx
@@ -208,12 +208,15 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
               collection,
               paginatedItems: collectionItems,
               initialPage: collectionInitialPage,
-              isLoading,
+              isLoadingCollection,
+              isLoadingCollectionItems,
               itemCurations
             }) => {
               const items = this.getItems(collection, collectionItems, itemCurations)
               const isCollectionTab = this.isCollectionTabActive()
-              const showLoader = isLoading && ((isCollectionTab && collections.length === 0) || (!isCollectionTab && items.length === 0))
+              const showLoader =
+                (isLoadingCollection || isLoadingCollectionItems) &&
+                ((isCollectionTab && collections.length === 0) || (!isCollectionTab && items.length === 0))
               const initialPage = selectedCollectionId && collection ? collectionInitialPage : this.state.initialPage
               if (showLoader) {
                 return <Loader size="massive" active />
@@ -262,7 +265,7 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
                       hasHeader={items.length > 0}
                       selectedCollectionId={selectedCollectionId}
                       onLoadPage={this.loadPage}
-                      isLoading={isLoading}
+                      isLoading={isLoadingCollection}
                     />
                   ) : null}
                   {showItems ? (
@@ -280,7 +283,7 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
                         onSetItems={onSetItems}
                         wearableController={wearableController}
                         initialPage={initialPage}
-                        isLoading={isLoading || isLoadingOrphanItems}
+                        isLoading={isLoadingCollectionItems || isLoadingOrphanItems}
                         onLoadRandomPage={() => this.loadRandomPage(items)}
                         onLoadPage={this.loadPage}
                         onSetReviewedItems={onSetReviewedItems}

diff --git a/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx b/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx
@@ -263,16 +263,16 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
       />
       <Form onSubmit={handleSubmit} disabled={!isSubmittable}>
         <ModalContent>
-          {thirdParties.length && !isLinkedWearablesPaymentsEnabled && (
+          {thirdParties.length && !isLinkedWearablesPaymentsEnabled ? (
             <SelectField
               label={t('create_third_party_collection_modal.third_party_field.label')}
               options={thirdPartyOptions}
               onChange={handleThirdPartyChange}
               disabled={isLoading}
               value={selectedThirdParty?.id}
             />
-          )}
-          {isLinkedWearablesPaymentsEnabled && collectionNameField}
+          ) : null}
+          {isLinkedWearablesPaymentsEnabled ? collectionNameField : undefined}
           {isLinkedWearablesV2Enabled && (
             <div className={styles.contract}>
               {thirdPartyContractNetworkOptions.length > 0 && !isLinkedWearablesPaymentsEnabled ? (
@@ -315,7 +315,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
               )}
             </div>
           )}
-          {!isLinkedWearablesPaymentsEnabled && collectionNameField}
+          {!isLinkedWearablesPaymentsEnabled ? collectionNameField : null}
           {!isLinkedWearablesV2Enabled && (
             <Field
               label={t('create_third_party_collection_modal.collection_id_field.label')}

diff --git a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.container.ts b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.container.ts
@@ -6,9 +6,8 @@ import { getData as getAuthorizations } from 'decentraland-dapps/dist/modules/au
 import { RootState } from 'modules/common/types'
 import { getCollectionId } from 'modules/location/selectors'
 import { getCollection, getLoading as getLoadingCollection } from 'modules/collection/selectors'
-import { getCollectionItems, getLoading as getLoadingItem, getPaginationData } from 'modules/item/selectors'
-import { FETCH_COLLECTION_ITEMS_REQUEST } from 'modules/item/actions'
-import { FETCH_COLLECTIONS_REQUEST, DELETE_COLLECTION_REQUEST } from 'modules/collection/actions'
+import { getCollectionItems, getPaginationData } from 'modules/item/selectors'
+import { DELETE_COLLECTION_REQUEST } from 'modules/collection/actions'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getCollectionThirdParty, isFetchingAvailableSlots, isLoadingThirdParties, isLoadingThirdParty } from 'modules/thirdParty/selectors'
 import { fetchThirdPartyAvailableSlotsRequest, fetchThirdPartyRequest } from 'modules/thirdParty/actions'
@@ -40,9 +39,7 @@ const mapState = (state: RootState): MapStateProps => {
     thirdParty: collection && isThirdPartyCollection(collection) ? getCollectionThirdParty(state, collection) : null,
     authorizations: getAuthorizations(state),
     isLoading:
-      isLoadingType(getLoadingCollection(state), FETCH_COLLECTIONS_REQUEST) ||
       isLoadingType(getLoadingCollection(state), DELETE_COLLECTION_REQUEST) ||
-      isLoadingType(getLoadingItem(state), FETCH_COLLECTION_ITEMS_REQUEST) ||
       isLoadingThirdParties(state) ||
       !!(isThirdParty && collection && isLoadingThirdParty(state, extractThirdPartyId(collection.urn))),
     isLoadingAvailableSlots: isFetchingAvailableSlots(state),

diff --git a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css
@@ -1,3 +1,13 @@
+/* Login wrapper */
+
+.main,
+.main > :global(.ui.container) {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
 .slots {
   font-weight: bold;
   text-transform: uppercase;
@@ -146,6 +156,8 @@
   margin-top: 16px;
   gap: 16px;
   min-width: 1400px;
+  flex: 1;
+  min-width: 0;
 }
 
 .info {
@@ -285,3 +297,13 @@
 .standardBadge {
   background-color: #43404a;
 }
+
+/* Loader */
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  flex: 1;
+}