refactor: Optimise pool page queries (#3634)

* refactor: Use single layout for any page with pool id in route

* chore: Use pool provider for pool page

* chore: Prevent refetch on focus & don't wait for token injection

* refactor: Wait for vebal injection before enabling queries

src/App.vue

@@ -41,8 +41,8 @@ const FocussedLayout = defineAsyncComponent(
 const ContentLayout = defineAsyncComponent(
   () => import('@/pages/_layouts/ContentLayout.vue')
 );
-const JoinExitLayout = defineAsyncComponent(
-  () => import('@/pages/_layouts/JoinExitLayout.vue')
+const PoolLayout = defineAsyncComponent(
+  () => import('@/pages/_layouts/PoolLayout.vue')
 );
 
 BigNumber.config({ DECIMAL_PLACES: DEFAULT_TOKEN_DECIMALS });
@@ -57,7 +57,7 @@ const Layouts = {
   ContentLayout: ContentLayout,
   DefaultLayout: DefaultLayout,
   FocussedLayout: FocussedLayout,
-  JoinExitLayout: JoinExitLayout,
+  PoolLayout: PoolLayout,
 };
 /**
  * COMPOSABLES

src/components/contextual/pages/pool/MyPoolBalancesCard.vue

@@ -45,7 +45,7 @@ const { isMigratablePool } = usePoolHelpers(toRef(props, 'pool'));
 const { stakedShares } = usePoolStaking();
 const { networkSlug } = useNetwork();
 const router = useRouter();
-const { totalLockedValue } = useLock();
+const { totalLockedValue } = useLock({ enabled: isVeBalPool(props.pool.id) });
 
 /**
  * COMPUTED

src/components/layouts/DefaultLayout.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Footer from '@/components/footer/Footer.vue';
+import AppNav from '@/components/navs/AppNav/AppNav.vue';
+</script>
+
+<template>
+  <div>
+    <div class="app-body">
+      <AppNav />
+      <div class="pb-16">
+        <slot />
+      </div>
+    </div>
+    <Footer />
+  </div>
+</template>
+
+<style>
+.VueQueryDevtoolsPanel + button {
+  @apply text-black bg-gray-100 p-2 rounded text-sm;
+}
+
+.app-body {
+  @apply mb-8;
+
+  min-height: calc(100vh - 2rem);
+}
+</style>

src/composables/queries/usePoolQuery.ts

@@ -79,7 +79,7 @@ export default function usePoolQuery(
     }
 
     // Inject pool tokens into token registry
-    await injectTokens([
+    injectTokens([
       ...tokensListExclBpt(pool),
       ...tokenTreeLeafs(pool.tokens),
       pool.address, // We need to inject pool addresses so we can fetch a user's balance for that pool.
@@ -90,6 +90,8 @@ export default function usePoolQuery(
 
   const queryOptions = reactive({
     enabled,
+    keepPreviousData: true,
+    refetchOnWindowFocus: false,
     ...options,
   });
 

src/pages/_layouts/DefaultLayout.vue

@@ -1,32 +1,13 @@
 <script setup lang="ts">
-import Footer from '@/components/footer/Footer.vue';
-import AppNav from '@/components/navs/AppNav/AppNav.vue';
+import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
 </script>
 
 <template>
-  <div>
-    <div class="app-body">
-      <AppNav />
-      <div class="pb-16">
-        <router-view v-slot="{ Component }" :key="$route.path">
-          <transition appear name="appear">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </div>
-    </div>
-    <Footer />
-  </div>
+  <DefaultLayout>
+    <router-view v-slot="{ Component }" :key="$route.path">
+      <transition appear name="appear">
+        <component :is="Component" />
+      </transition>
+    </router-view>
+  </DefaultLayout>
 </template>
-
-<style>
-.VueQueryDevtoolsPanel + button {
-  @apply text-black bg-gray-100 p-2 rounded text-sm;
-}
-
-.app-body {
-  @apply mb-8;
-
-  min-height: calc(100vh - 2rem);
-}
-</style>

src/pages/_layouts/JoinExitLayout.vue → src/pages/_layouts/PoolLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import FocussedLayout from '@/components/layouts/FocussedLayout.vue';
+import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
 import { providePoolStaking } from '@/providers/local/pool-staking.provider';
 import { providePool } from '@/providers/local/pool.provider';
 import { provideUserTokens } from '@/providers/local/user-tokens.provider';
@@ -10,6 +11,17 @@ import { provideUserTokens } from '@/providers/local/user-tokens.provider';
 const route = useRoute();
 const poolId = (route.params.id as string).toLowerCase();
 
+/**
+ * COMPUTED
+ */
+const isJoinOrExitPath = computed(
+  () => route.path.includes('add-liquidity') || route.path.includes('withdraw')
+);
+
+const layoutComponent = computed(() =>
+  isJoinOrExitPath.value ? FocussedLayout : DefaultLayout
+);
+
 /**
  * PROVIDERS
  */
@@ -19,11 +31,11 @@ provideUserTokens();
 </script>
 
 <template>
-  <FocussedLayout>
+  <component :is="layoutComponent">
     <router-view v-slot="{ Component }" :key="$route.path">
       <transition appear name="appear">
         <component :is="Component" />
       </transition>
     </router-view>
-  </FocussedLayout>
+  </component>
 </template>

src/pages/pool/_id.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-
 import {
   PoolChart,
   PoolStatCards,
@@ -15,9 +13,7 @@ import PoolLockingCard from '@/components/contextual/pages/pool/PoolLockingCard/
 import ApyVisionPoolLink from '@/components/links/ApyVisionPoolLink.vue';
 import PoolPageHeader from '@/components/pool/PoolPageHeader.vue';
 import usePoolAprQuery from '@/composables/queries/usePoolAprQuery';
-import usePoolQuery from '@/composables/queries/usePoolQuery';
 import usePoolSnapshotsQuery from '@/composables/queries/usePoolSnapshotsQuery';
-import useAlerts, { AlertPriority, AlertType } from '@/composables/useAlerts';
 import {
   isVeBalPool,
   preMintedBptIndex,
@@ -31,13 +27,13 @@ import { POOLS } from '@/constants/pools';
 import { includesAddress } from '@/lib/utils';
 import useHistoricalPricesQuery from '@/composables/queries/useHistoricalPricesQuery';
 import { PoolToken } from '@/services/pool/types';
-import { providePoolStaking } from '@/providers/local/pool-staking.provider';
 import useWeb3 from '@/services/web3/useWeb3';
 import BrandedRedirectCard from '@/components/pool/branded-redirect/BrandedRedirectCard.vue';
 import metaService from '@/services/meta/meta.service';
 import PoolMigrationCard from '@/components/contextual/pages/pool/PoolMigrationCard/PoolMigrationCard.vue';
 import StakePreviewModal from '@/components/contextual/pages/pool/staking/StakePreviewModal.vue';
 import PoolRisks from '@/components/contextual/pages/pool/risks/PoolRisks.vue';
+import { usePool } from '@/providers/local/pool.provider';
 
 /**
  * STATE
@@ -47,37 +43,25 @@ const router = useRouter();
 const poolId = (route.params.id as string).toLowerCase();
 const isRestakePreviewVisible = ref(false);
 
-/**
- * PROVIDERS
- */
-providePoolStaking(poolId);
-
 /**
  * COMPOSABLES
  */
-const { t } = useI18n();
-
 const { prices, priceQueryLoading } = useTokens();
 const { isWalletReady } = useWeb3();
-const { addAlert, removeAlert } = useAlerts();
 const _isVeBalPool = isVeBalPool(poolId);
-
-//#region pool query
-const poolQuery = usePoolQuery(poolId, undefined, undefined);
-const pool = computed(() => poolQuery.data.value);
-const poolQueryLoading = computed(
-  () => poolQuery.isLoading.value || Boolean(poolQuery.error.value)
-);
-const loadingPool = computed(() => poolQueryLoading.value || !pool.value);
-
+const { pool, isLoadingPool } = usePool();
 const {
   isStableLikePool,
   isLiquidityBootstrappingPool,
   isComposableStableLikePool,
   isDeprecatedPool,
   isNewPoolAvailable,
-} = usePoolHelpers(poolQuery.data);
-//#endregion
+} = usePoolHelpers(pool);
+
+/**
+ * COMPUTED
+ */
+const loadingPool = computed(() => isLoadingPool.value || !pool.value);
 
 //#region pool snapshot query
 const poolSnapshotsQuery = usePoolSnapshotsQuery(poolId, undefined, {
@@ -189,22 +173,6 @@ function setRestakeVisibility(value: boolean): void {
 /**
  * WATCHERS
  */
-watch(poolQuery.error, () => {
-  if (poolQuery.error.value) {
-    addAlert({
-      id: 'pool-fetch-error',
-      label: t('alerts.pool-fetch-error'),
-      type: AlertType.ERROR,
-      persistent: true,
-      action: poolQuery.refetch,
-      actionLabel: t('alerts.retry-label'),
-      priority: AlertPriority.MEDIUM,
-    });
-  } else {
-    removeAlert('pool-fetch-error');
-  }
-});
-
 watch(
   () => pool.value,
   () => {

src/plugins/router/index.ts

@@ -91,12 +91,13 @@ const routes: RouteRecordRaw[] = [
     path: '/:networkSlug/pool/:id',
     name: 'pool',
     component: PoolPage,
+    meta: { layout: 'PoolLayout' },
   },
   {
     path: '/:networkSlug/pool/:id/add-liquidity',
     name: 'add-liquidity',
     component: PoolAddLiquidityPage,
-    meta: { layout: 'JoinExitLayout' },
+    meta: { layout: 'PoolLayout' },
   },
   {
     path: '/:networkSlug/pool/:id/invest',
@@ -109,7 +110,7 @@ const routes: RouteRecordRaw[] = [
     path: '/:networkSlug/pool/:id/withdraw',
     name: 'withdraw',
     component: PoolWithdrawPage,
-    meta: { layout: 'JoinExitLayout' },
+    meta: { layout: 'PoolLayout' },
   },
   {
     path: '/:networkSlug/vebal',

src/providers/local/pool.provider.ts

@@ -4,8 +4,13 @@ import { isQueryLoading } from '@/composables/queries/useQueryHelpers';
 import symbolKeys from '@/constants/symbol.keys';
 import { Pool } from '@/services/pool/types';
 import { safeInject } from '../inject';
+import useAlerts, { AlertPriority, AlertType } from '@/composables/useAlerts';
+import { useI18n } from 'vue-i18n';
 
 export function poolProvider(poolId: string) {
+  const { addAlert, removeAlert } = useAlerts();
+  const { t } = useI18n();
+
   const poolQuery = usePoolQuery(poolId);
 
   const initialPool = computed((): Pool | undefined => {
@@ -25,6 +30,22 @@ export function poolProvider(poolId: string) {
     return decoratedPool.value || initialPool.value;
   });
 
+  watch(poolQuery.error, () => {
+    if (poolQuery.error.value) {
+      addAlert({
+        id: 'pool-fetch-error',
+        label: t('alerts.pool-fetch-error'),
+        type: AlertType.ERROR,
+        persistent: true,
+        action: poolQuery.refetch,
+        actionLabel: t('alerts.retry-label'),
+        priority: AlertPriority.MEDIUM,
+      });
+    } else {
+      removeAlert('pool-fetch-error');
+    }
+  });
+
   return {
     pool,
     isLoadingPool,

src/providers/tokens.provider.ts

@@ -77,6 +77,8 @@ export const tokensProvider = (
   /**
    * STATE
    */
+  const queriesEnabled = ref(false);
+
   const nativeAsset: NativeAsset = {
     ...networkConfig.nativeAsset,
     chainId: networkConfig.chainId,
@@ -162,7 +164,7 @@ export const tokensProvider = (
     isRefetching: balanceQueryRefetching,
     isError: balancesQueryError,
     refetch: refetchBalances,
-  } = useBalancesQuery(tokens);
+  } = useBalancesQuery(tokens, { enabled: queriesEnabled });
 
   const {
     data: allowanceData,
@@ -171,7 +173,9 @@ export const tokensProvider = (
     isRefetching: allowanceQueryRefetching,
     isError: allowancesQueryError,
     refetch: refetchAllowances,
-  } = useAllowancesQuery(tokens, toRef(state, 'spenders'));
+  } = useAllowancesQuery(tokens, toRef(state, 'spenders'), {
+    enabled: queriesEnabled,
+  });
 
   const prices = computed(
     (): TokenPrices => (priceData.value ? priceData.value : {})
@@ -494,6 +498,7 @@ export const tokensProvider = (
     // Inject veBAL because it's not in tokenlists.
     const { veBAL } = configService.network.addresses;
     await injectTokens([veBAL]);
+    queriesEnabled.value = true;
     state.loading = false;
   });