diff --git a/package-lock.json b/package-lock.json
index 0c5de1b..ccf57b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.5.2",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.2.1",
+        "@abi-software/map-utilities": "^1.2.2-beta.2",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,9 +65,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.2.1.tgz",
-      "integrity": "sha512-4Dc8ONKaAZLRK8B3L/dGX+vP4cI7ztsvyGwCVbWu14qEe/BvxnGV3sGbcBSGmBoHL9Tef6eWSrVIWquWkeCr/Q==",
+      "version": "1.2.2-beta.2",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.2.2-beta.2.tgz",
+      "integrity": "sha512-HaLkFUu03Z8CVDe3Vh+Ocs6KP5EoPR6USCvET3CGAP9BWlpnxwaGO1MJs8YsDHGJgC6PIfDMSVhFlO8+IYm3Qg==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 8c5ac9f..c443ddf 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.2.1",
+    "@abi-software/map-utilities": "^1.2.2-beta.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index e42f357..45c9539 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -81,7 +81,7 @@
       </div>
     </div>
 
-    <div class="content-container content-container-connectivity" v-if="activeView === 'listView'">
+    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -209,13 +209,15 @@
       </div>
     </div>
 
-    <div class="content-container" v-if="activeView === 'graphView'">
-      <connectivity-graph
-        :entry="entry.featureId[0]"
-        :mapServer="envVars.FLATMAPAPI_LOCATION"
-        @tap-node="onTapNode"
-        ref="connectivityGraphRef"
-      />
+    <div class="content-container" v-show="activeView === 'graphView'">
+      <template v-if="graphViewLoaded">
+        <connectivity-graph
+          :entry="entry.featureId[0]"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          @tap-node="onTapNode"
+          ref="connectivityGraphRef"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -304,6 +306,7 @@ export default {
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,
+      graphViewLoaded: false,
     }
   },
   watch: {
@@ -406,13 +409,11 @@ export default {
     switchConnectivityView: function (val) {
       this.activeView = val;
 
-      if (val === 'graphView') {
-        const connectivityGraphRef = this.$refs.connectivityGraphRef;
-        if (connectivityGraphRef && connectivityGraphRef.$el) {
-          connectivityGraphRef.$el.scrollIntoView({
-            behavior: 'smooth',
-          });
-        }
+      if (val === 'graphView' && !this.graphViewLoaded) {
+        // to load the connectivity graph only after the container is in view
+        this.$nextTick(() => {
+          this.graphViewLoaded = true;
+        });
       }
     },
     onTapNode: function (data) {