feat: show a loading indicator when rarities are loading

decentraland · Oct 6, 2021 · 33bec72 · 33bec72
1 parent 173d0ec
commit 33bec72
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/components/Modals/PublishCollectionModal/PublishCollectionModal.container.ts b/src/components/Modals/PublishCollectionModal/PublishCollectionModal.container.ts
@@ -2,9 +2,10 @@ import { connect } from 'react-redux'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { getData as getWallet } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
-import { getCollection, getCollectionItems, getLoading } from 'modules/collection/selectors'
+import { getCollection, getCollectionItems, getLoading as getCollectionLoading } from 'modules/collection/selectors'
+import { getLoading as getItemLoading } from 'modules/item/selectors'
 import { publishCollectionRequest, PUBLISH_COLLECTION_REQUEST } from 'modules/collection/actions'
-import { fetchRaritiesRequest, FETCH_RARITIES_REQUEST } from 'modules/item/actions'
+import { fetchRaritiesRequest, FETCH_RARITIES_REQUEST, FETCH_ITEMS_REQUEST } from 'modules/item/actions'
 import { getRarities } from 'modules/item/selectors'
 import { OwnProps, MapStateProps, MapDispatchProps, MapDispatch } from './PublishCollectionModal.types'
 import PublishCollectionModal from './PublishCollectionModal'
@@ -17,8 +18,9 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     collection: getCollection(state, collectionId),
     items: getCollectionItems(state, collectionId),
     rarities: getRarities(state),
-    isLoading: isLoadingType(getLoading(state), PUBLISH_COLLECTION_REQUEST),
-    isFetchingRarities: isLoadingType(getLoading(state), FETCH_RARITIES_REQUEST)
+    isPublishLoading: isLoadingType(getCollectionLoading(state), PUBLISH_COLLECTION_REQUEST),
+    isFetchingItems: isLoadingType(getItemLoading(state), FETCH_ITEMS_REQUEST),
+    isFetchingRarities: isLoadingType(getItemLoading(state), FETCH_RARITIES_REQUEST)
   }
 }
 

diff --git a/src/components/Modals/PublishCollectionModal/PublishCollectionModal.tsx b/src/components/Modals/PublishCollectionModal/PublishCollectionModal.tsx
@@ -52,7 +52,7 @@ export default class PublishCollectionModal extends React.PureComponent<Props, S
   }
 
   renderFirstStep = () => {
-    const { items, wallet, onClose, rarities, isFetchingRarities } = this.props
+    const { items, wallet, onClose, rarities, isFetchingItems, isFetchingRarities } = this.props
 
     const itemsByRarity: Record<string, { id: ItemRarity; name: ItemRarity; count: number; price: number }> = {}
     let totalPrice = 0
@@ -76,11 +76,13 @@ export default class PublishCollectionModal extends React.PureComponent<Props, S
 
     const hasInsufficientMANA = !!wallet && wallet.networks.MATIC.mana < totalPrice
 
+    console.log({ isFetchingItems, isFetchingRarities, items, itemsByRarity })
+
     return (
       <>
         <ModalNavigation title={t('publish_collection_modal.title')} onClose={onClose} />
         <Modal.Content className="first-step">
-          {isFetchingRarities ? (
+          {isFetchingItems || isFetchingRarities ? (
             <div className="loader-wrapper">
               <Loader size="big" active={isFetchingRarities} />
             </div>
@@ -165,7 +167,7 @@ export default class PublishCollectionModal extends React.PureComponent<Props, S
   }
 
   renderThirdStep = () => {
-    const { isLoading, onClose } = this.props
+    const { isPublishLoading, onClose } = this.props
     const { email, emailFocus } = this.state
     const hasValidEmail = emailRegex.test(email ?? '')
     const showEmailError = !hasValidEmail && !emailFocus && email !== undefined && email !== ''
@@ -208,7 +210,7 @@ export default class PublishCollectionModal extends React.PureComponent<Props, S
           />
         </Modal.Content>
         <Modal.Actions className="third-step-footer">
-          <Button primary fluid disabled={!hasValidEmail} loading={isLoading}>
+          <Button primary fluid disabled={!hasValidEmail} loading={isPublishLoading}>
             {t('publish_collection_modal.publish')}
           </Button>
           <p>{t('publish_collection_modal.accept_by_publishing')}</p>

diff --git a/src/components/Modals/PublishCollectionModal/PublishCollectionModal.types.ts b/src/components/Modals/PublishCollectionModal/PublishCollectionModal.types.ts
@@ -12,7 +12,8 @@ export type Props = ModalProps & {
   collection: Collection | null
   items: Item[]
   rarities: Rarity[]
-  isLoading: boolean
+  isPublishLoading: boolean
+  isFetchingItems: boolean
   isFetchingRarities: boolean
   onPublish: typeof publishCollectionRequest
   onFetchRarities: typeof fetchRaritiesRequest
@@ -28,7 +29,10 @@ export type PublishCollectionModalMetadata = {
   collectionId: string
 }
 
-export type MapStateProps = Pick<Props, 'wallet' | 'collection' | 'items' | 'rarities' | 'isLoading' | 'isFetchingRarities'>
+export type MapStateProps = Pick<
+  Props,
+  'wallet' | 'collection' | 'items' | 'rarities' | 'isPublishLoading' | 'isFetchingItems' | 'isFetchingRarities'
+>
 export type MapDispatchProps = Pick<Props, 'onPublish' | 'onFetchRarities'>
 export type MapDispatch = Dispatch<PublishCollectionRequestAction | FetchRaritiesRequestAction>
 export type OwnProps = Pick<Props, 'metadata'>