fix: load notifications and transactions in chunks

Author: CedrikNikita

src/composables/viewport.ts

@@ -1,6 +1,5 @@
 import { debounce } from 'lodash-es';
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { MOBILE_WIDTH } from '@/constants';
+import { onBeforeUnmount, ref } from 'vue';
 
 export interface IScrollCallbackParams {
   isOutsideOfViewport: boolean
@@ -11,18 +10,9 @@ export type OnViewportScrollCallback = (p: IScrollCallbackParams) => any;
 const viewportElement = ref<Element | undefined>();
 
 export const useViewport = () => {
-  function checkIsDesktop(): boolean {
-    return !!(
-      document.documentElement.clientWidth > MOBILE_WIDTH
-      || process.env.IS_EXTENSION
-    );
-  }
-
   const viewportScroll = debounce((callback: OnViewportScrollCallback) => {
-    const element = checkIsDesktop() ? viewportElement.value : document.documentElement;
-
-    if (element) {
-      const { scrollHeight, scrollTop, clientHeight } = element;
+    if (viewportElement.value) {
+      const { scrollHeight, scrollTop, clientHeight } = viewportElement.value;
       const isOutsideOfViewport = scrollHeight - scrollTop <= clientHeight + 100;
 
       callback({ isOutsideOfViewport });
@@ -34,12 +24,10 @@ export const useViewport = () => {
   }
 
   function onViewportScroll(onScrollMethod: OnViewportScrollCallback) {
-    onMounted(() => {
-      if (viewportElement.value) {
-        viewportElement.value.addEventListener('scroll', () => viewportScroll(onScrollMethod));
-      }
-      window.addEventListener('scroll', () => viewportScroll(onScrollMethod));
-    });
+    if (viewportElement.value) {
+      viewportElement.value.addEventListener('scroll', () => viewportScroll(onScrollMethod));
+    }
+    window.addEventListener('scroll', () => viewportScroll(onScrollMethod));
     onBeforeUnmount(() => {
       if (viewportElement.value) {
         viewportElement.value.removeEventListener('scroll', () => viewportScroll(onScrollMethod));

src/popup/App.vue

@@ -19,7 +19,6 @@
       </button>
       <div
         v-show="!qrScannerOpen"
-        ref="innerElement"
         class="app-inner"
         :class="{ 'styled-scrollbar': showScrollbar }"
       >
@@ -92,7 +91,6 @@ import {
   useModals,
   useNotifications,
   useUi,
-  useViewport,
 } from '@/composables';
 import { useAeTippingBackend } from '@/protocols/aeternity/composables';
 import { useTransferSendHandler } from '@/composables/transferSendHandler';
@@ -129,7 +127,6 @@ export default defineComponent({
     const { isLoggedIn } = useAccounts({ store });
     const { addWalletNotification } = useNotifications({ store });
     const { loadCoinsData } = useCurrencies({ store, withoutPolling: true });
-    const { initViewport } = useViewport();
     const { restore: restoreTransferSendForm } = useTransferSendHandler();
 
     const innerElement = ref<HTMLDivElement>();
@@ -223,7 +220,6 @@ export default defineComponent({
     onMounted(async () => {
       setDocumentHeight();
       checkExtensionUpdates();
-      initViewport(innerElement.value);
 
       // Hide splash screen programmatically when app is ready
       // to avoid white screen on app start

src/popup/components/InfiniteScroll.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, watch } from 'vue';
 import { useViewport } from '../../composables/viewport';
 
 export default defineComponent({
@@ -15,13 +15,19 @@ export default defineComponent({
   },
   emits: ['loadMore'],
   setup(props, { emit }) {
-    const { onViewportScroll } = useViewport();
+    const { viewportElement, onViewportScroll } = useViewport();
 
-    onViewportScroll(({ isOutsideOfViewport }) => {
-      if (props.isMoreData && isOutsideOfViewport) {
-        emit('loadMore');
-      }
-    });
+    watch(
+      viewportElement,
+      () => {
+        onViewportScroll(({ isOutsideOfViewport }) => {
+          if (props.isMoreData && isOutsideOfViewport) {
+            emit('loadMore');
+          }
+        });
+      },
+      { immediate: true },
+    );
   },
 });
 </script>

src/popup/components/TransactionList.vue

@@ -18,12 +18,12 @@
       />
     </InfiniteScroll>
     <AnimatedSpinner
-      v-if="loading"
+      v-show="loading"
       class="spinner"
       data-cy="loader"
     />
     <div
-      v-else-if="!filteredTransactions.length"
+      v-if="!loading && !filteredTransactions.length"
       class="message"
     >
       <p v-text="$t('pages.recentTransactions.noTransactionsFound')" />

src/popup/pages/Notifications.vue

@@ -1,7 +1,10 @@
 <template>
   <IonPage>
     <IonContent class="ion-padding ion-content-bg">
-      <div class="notifications">
+      <div
+        ref="innerElement"
+        class="notifications"
+      >
         <InfiniteScroll
           v-if="notificationsToShow.length"
           :is-more-data="canLoadMore"
@@ -31,10 +34,12 @@ import {
   onBeforeUnmount,
   onMounted,
   nextTick,
+  ref,
 } from 'vue';
 import { useStore } from 'vuex';
 import { IS_EXTENSION } from '@/constants';
 
+import { useViewport } from '@/composables';
 import NotificationItem from '../components/NotificationItem.vue';
 import InfiniteScroll from '../components/InfiniteScroll.vue';
 import { useNotifications } from '../../composables/notifications';
@@ -49,6 +54,9 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const { initViewport } = useViewport();
+
+    const innerElement = ref<HTMLElement>();
 
     const {
       notificationsToShow,
@@ -58,6 +66,7 @@ export default defineComponent({
     } = useNotifications({ store, requirePolling: true });
 
     onMounted(async () => {
+      initViewport(innerElement.value?.parentElement!);
       loadMoreNotifications();
       if (IS_EXTENSION) {
         await nextTick();
@@ -72,6 +81,7 @@ export default defineComponent({
     });
 
     return {
+      innerElement,
       notificationsToShow,
       canLoadMore,
       loadMoreNotifications,

src/protocols/aeternity/views/AccountDetailsTransactions.vue

@@ -39,6 +39,7 @@ import {
   useTransactionList,
   useUi,
   useScrollConfig,
+  useViewport,
 } from '@/composables';
 
 import MessageOffline from '@/popup/components/MessageOffline.vue';
@@ -67,6 +68,7 @@ export default defineComponent({
     const { isAppActive } = useUi();
     const { activeAccount } = useAccounts({ store });
     const { setScrollConf } = useScrollConfig();
+    const { initViewport } = useViewport();
 
     const {
       getAccountAllTransactions,
@@ -124,6 +126,7 @@ export default defineComponent({
     );
 
     onMounted(() => {
+      initViewport(appInnerElem.value!);
       if (innerScrollElem.value && appInnerElem.value) {
         appInnerElem.value.addEventListener('scroll', throttledScroll());
       }