Merge pull request #90 from jameel-institute/jidea-183-dont-load-glob…

…e-component-on-about-page

JIDEA-183: Use page route to determine whether globe component is loaded

components/Globe.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-show="showGlobe"
     @mousedown="deselectText"
     @touchstart="deselectText"
     @mousemove="onMouseMove"
@@ -127,8 +126,6 @@ const prevSelectablePolygon = ref<am5map.MapPolygon | undefined>(undefined);
 
 const findFeatureForCountry = (countryIso: string) => WHONationalBorders.features.find(f => f.id === countryIso);
 
-const showGlobe = computed(() => appStore.globeParameter && appStore.largeScreen && route.path !== "/about");
-
 const highlightedCountrySeries = computed(() => {
   if (!appStore.globe.highlightedCountry) {
     return null;

layouts/default.vue

@@ -14,7 +14,8 @@
         </CContainer>
       </div>
     </div>
-    <LazyGlobe v-if="loadGlobeComponent" />
+    <!-- This is a dynamic import: https://nuxt.com/docs/guide/directory-structure/components#dynamic-imports -->
+    <LazyGlobe v-if="loadGlobeComponent" v-show="showGlobe" />
   </div>
 </template>
 
@@ -23,21 +24,42 @@ const appStore = useAppStore();
 
 const sidebarVisible = ref(false);
 const loadGlobeComponent = ref(false);
+const route = useRoute();
 
 function handleToggleSidebarVisibility() {
   sidebarVisible.value = !sidebarVisible.value;
 }
 
+const pagesUsingGlobe = ["scenarios-runId", "scenarios-new"];
+
+// Hide/show the component separately from loading it. We want to load either 0 or 1 times max, but show/hide it as needed.
+const showGlobe = computed(() => !!appStore.globeParameter && appStore.largeScreen && pagesUsingGlobe.includes(route.name as string));
+
+// Set whether to load the globe component based on the current route and screen size.
+const setGlobeComponent = () => {
+  // In order that we only load the globe component once, don't set loadGlobeComponent back to false if
+  // it's already true, since setting it to false will cause the component to be destroyed.
+  if (!loadGlobeComponent.value) {
+    // Set the loadGlobeComponent value here, rather than using a computed property, since the app store initializes with the assumption
+    // that largeScreen is true, and so using a computed would mean that we always try to load the globe on the initial page load.
+    loadGlobeComponent.value = showGlobe.value;
+  }
+};
+
 const setScreenSize = () => {
   const breakpoint = 992; // CoreUI's "lg" breakpoint
   if (window.innerWidth < breakpoint) {
     appStore.largeScreen = false;
   } else {
     appStore.largeScreen = true;
-    loadGlobeComponent.value = true;
   }
+  setGlobeComponent();
 };
 
+watch(() => route.name, () => {
+  setGlobeComponent();
+});
+
 appStore.loadMetadata();
 
 onMounted(() => {