Merge pull request #3383 from superhero-com/feature/do-not-render-all…

…-assets-at-once

perf(asset-selector): do not render all assets at once

src/constants/common.ts

@@ -83,6 +83,7 @@ export const NETWORK_NAME_MAX_LENGTH = 15;
 export const DEFAULT_WAITING_HEIGHT = 15;
 export const FIXED_TABS_SCROLL_HEIGHT = 30;
 
+export const ASSETS_PER_PAGE = 30;
 export const TXS_PER_PAGE = 30;
 export const AUTO_EXTEND_NAME_BLOCKS_INTERVAL = 17000;
 

src/popup/components/Modal.vue

@@ -21,7 +21,10 @@
         'min-height': minHeight,
       }"
     >
-      <div class="container">
+      <div
+        ref="scrollElem"
+        class="container"
+      >
         <div
           v-if="showHeader"
           class="header"
@@ -82,12 +85,14 @@
 import {
   computed,
   defineComponent,
+  ref,
   onBeforeUnmount,
   onMounted,
 } from 'vue';
 import { BackButtonEvent } from '@ionic/vue';
 
 import { IS_FIREFOX, IS_EXTENSION } from '@/constants';
+import { useScrollConfig, useViewport } from '@/composables';
 
 import BtnClose from './buttons/BtnClose.vue';
 import FixedScreenFooter from './FixedScreenFooter.vue';
@@ -113,10 +118,16 @@ export default defineComponent({
     centered: Boolean,
     minHeight: Boolean,
     transparent: Boolean,
+    initializeViewport: Boolean,
     header: { type: String, default: null },
   },
   emits: ['close', 'open'],
   setup(props, { slots, emit }) {
+    const scrollElem = ref<HTMLElement>();
+
+    const { setScrollConf } = useScrollConfig();
+    const { initViewport } = useViewport();
+
     const showHeader = computed(() => props.hasCloseButton || props.header || slots.header);
 
     function handleClose() {
@@ -128,13 +139,20 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      if (props.initializeViewport) {
+        setScrollConf(false);
+        initViewport(scrollElem.value!);
+      }
       document.addEventListener('ionBackButton', onBackButtonHandler);
       if (!document.body.style.overflow) {
         document.body.style.overflow = 'hidden';
       }
     });
 
     onBeforeUnmount(() => {
+      if (props.initializeViewport) {
+        setScrollConf(false);
+      }
       document.removeEventListener('ionBackButton', onBackButtonHandler);
       document.body.style.overflow = '';
     });
@@ -143,6 +161,7 @@ export default defineComponent({
       handleClose,
       IS_FIREFOX,
       IS_EXTENSION,
+      scrollElem,
       showHeader,
     };
   },

src/popup/components/Modals/AssetSelector.vue

@@ -3,10 +3,10 @@
     full-screen
     from-bottom
     has-close-button
+    initialize-viewport
     no-padding
     class="asset-selector"
     @close="reject()"
-    @open="onModalOpen"
   >
     <template #header>
       <span
@@ -20,14 +20,10 @@
       />
     </template>
 
-    <Loader
-      class="appearing-element"
-      :class="{ visible: loading }"
-    />
-    <div
-      v-show="isFullyOpen"
-      class="appearing-element"
-      :class="{ visible: !loading }"
+    <InfiniteScroll
+      class="list"
+      data-cy="list"
+      @load-more="pageNumber += 1"
     >
       <AssetListItem
         v-for="asset in accountAssetsToDisplay"
@@ -37,17 +33,17 @@
         prevent-navigation
         @click="resolve(asset)"
       />
-    </div>
+    </InfiniteScroll>
   </Modal>
 </template>
 
 <script lang="ts">
 import {
   computed,
   defineComponent,
-  nextTick,
   PropType,
   ref,
+  watch,
 } from 'vue';
 import type {
   IAsset,
@@ -56,11 +52,12 @@ import type {
   ResolveCallback,
 } from '@/types';
 import { useAccountAssetsList } from '@/composables';
+import { ASSETS_PER_PAGE } from '@/constants';
 
 import Modal from '../Modal.vue';
 import AssetListItem from '../Assets/AssetListItem.vue';
 import InputSearch from '../InputSearch.vue';
-import Loader from '../Loader.vue';
+import InfiniteScroll from '../InfiniteScroll.vue';
 
 export type AssetSelectorResolvedVal = IAsset;
 
@@ -70,7 +67,7 @@ export default defineComponent({
     AssetListItem,
     Modal,
     InputSearch,
-    Loader,
+    InfiniteScroll,
   },
   props: {
     resolve: {
@@ -83,52 +80,44 @@ export default defineComponent({
     withBalanceOnly: Boolean,
   },
   setup(props) {
-    const loading = ref(true);
     const searchTerm = ref('');
     const isFullyOpen = ref(false);
+    const pageNumber = ref(1);
 
     const { accountAssetsFiltered } = useAccountAssetsList({
       searchTerm,
       withBalanceOnly: props.withBalanceOnly,
     });
 
-    const accountAssetsToDisplay = computed(() => (props.protocol)
-      ? accountAssetsFiltered.value.filter(({ protocol }) => protocol === props.protocol)
-      : accountAssetsFiltered.value);
+    const accountAssetsToDisplay = computed(() => (
+      (props.protocol)
+        ? accountAssetsFiltered.value.filter(({ protocol }) => protocol === props.protocol)
+        : accountAssetsFiltered.value
+    )
+      .slice(0, pageNumber.value * ASSETS_PER_PAGE));
 
     function isAssetSelected(token: IAsset): boolean {
       return !!props.selectedToken && props.selectedToken.contractId === token.contractId;
     }
-
-    /**
-     * Delay displaying tokens list until the modal transition is finished to prevent
-     * performance issues when both animating the modal and rendering large amount of data.
-     */
-    async function onModalOpen() {
-      await nextTick();
-      isFullyOpen.value = true;
-      setTimeout(() => {
-        loading.value = false;
-      }, 250);
-    }
+    watch(
+      searchTerm,
+      () => {
+        pageNumber.value = 1;
+      },
+    );
 
     return {
-      loading,
-      searchTerm,
-      isFullyOpen,
       accountAssetsToDisplay,
+      isFullyOpen,
+      pageNumber,
+      searchTerm,
       isAssetSelected,
-      onModalOpen,
     };
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/variables' as *;
-@use '@/styles/typography';
-@use '@/styles/mixins';
-
 .asset-selector {
   padding-top: env(safe-area-inset-top);
 
@@ -142,18 +131,5 @@ export default defineComponent({
     line-height: 48px;
     text-align: left;
   }
-
-  .appearing-element {
-    width: 100%;
-    opacity: 0;
-    z-index: -1;
-    transition: opacity 0.25s ease-in-out;
-    padding-bottom: 40px; // Back-to-top button height
-
-    &.visible {
-      opacity: 1;
-      z-index: 1;
-    }
-  }
 }
 </style>

tests/e2e/support/commands.js

@@ -323,8 +323,6 @@ Cypress.Commands.add('generateReceiveLinkAndVisit', (address, amount, token = nu
   if (token) {
     cy.get('[data-cy=select-asset]')
       .click()
-      .get('[data-cy=loader]')
-      .should('be.visible')
       .get('.modal .header [data-cy=input]')
       .type(token.contractId)
       .get('.tokens-list-item:first-child', { timeout: 8000 })