diff --git a/plugin-designs/pplr-data-maps/pplr-data-maps.vue b/plugin-designs/pplr-data-maps/pplr-data-maps.vue index 0e9cef1ed..609ad5263 100644 --- a/plugin-designs/pplr-data-maps/pplr-data-maps.vue +++ b/plugin-designs/pplr-data-maps/pplr-data-maps.vue @@ -18,7 +18,8 @@ * * profile-config: { "profile":"pplr-data-maps", "tk":"pk...", "view":"pplr-religion" } */ -import { inject, ref, computed, defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue' +import { inject, ref, computed, onMounted, onBeforeUnmount } from 'vue' +import { retryableAsyncComponent } from '@map/composables/retryableAsyncComponent.js' import { useShadowStyles } from '@map/composables/useShadowStyles.js' import { resolveAssetsBase } from '@map/utils/embedBase.js' import { setDataBase, ensureD3 } from './src/utils/pplrData.js' @@ -43,7 +44,9 @@ const VIEWS = [ { key: 'pplr-coverage', label: 'Translation coverage', tKey: 'pplr.tabs.coverage', load: () => import('./src/views/pplr-coverage.vue') }, { key: 'pplr-index', label: 'Index', tKey: 'pplr.tabs.index', load: () => import('./src/views/pplr-index.vue') }, ] -const COMPONENTS = Object.fromEntries(VIEWS.map((v) => [v.key, defineAsyncComponent(v.load)])) +// The library wrapper, not Vue's raw async component: Vue caches a REJECTED loader, so one network blip +// left that tab dead until a full reload. retryableAsyncComponent retries the import instead. +const COMPONENTS = Object.fromEntries(VIEWS.map((v) => [v.key, retryableAsyncComponent(v.load)])) const VALID = new Set(VIEWS.map((v) => v.key)) // Chosen at setup so a non-default view never mounts the default first (see upg-neighbor.vue).