link map widget always rendered centered map

src/public/javascripts/widgets/link_map.js

@@ -4,7 +4,7 @@ let linkMapContainerIdCtr = 1;
 
 const TPL = `
 <div class="link-map-widget">
-    <div class="link-map-container"></div>
+    <div class="link-map-container" style="height: 300px;"></div>
 </div>
 `;
 
@@ -28,25 +28,43 @@ export default class LinkMapWidget extends CollapsibleWidget {
         return [$showFullButton];
     }
 
-    noteSwitched() {
+    decorateWidget() {
+        this.$body.css("max-height", "400px");
+    }
+
+    async refreshWithNote(note) {
         const noteId = this.noteId;
 
+        let shown = false;
+
         // avoid executing this expensive operation multiple times when just going through notes (with keyboard especially)
         // until the users settles on a note
         setTimeout(() => {
             if (this.noteId === noteId) {
-                this.refresh();
+                // there's a problem with centering the rendered link map before it is actually shown on the screen
+                // that's why we make the whole process lazy and with the help of IntersectionObserver wait until the
+                // tab is really shown and only then render
+                const observer = new IntersectionObserver(entries => {
+                    if (!shown && entries[0].isIntersecting) {
+                        shown = true;
+                        this.displayLinkMap(note);
+                    }
+                }, {
+                    rootMargin: '0px',
+                    threshold: 0.1
+                });
+
+                observer.observe(this.$body[0]);
             }
         }, 1000);
     }
 
-    async refreshWithNote(note) {
+    async displayLinkMap(note) {
         this.$body.css('opacity', 0);
         this.$body.html(TPL);
 
         const $linkMapContainer = this.$body.find('.link-map-container');
         $linkMapContainer.attr("id", "link-map-container-" + linkMapContainerIdCtr++);
-        $linkMapContainer.css("height", "300px");
 
         const LinkMapServiceClass = (await import('../services/link_map.js')).default;
 
@@ -69,7 +87,7 @@ export default class LinkMapWidget extends CollapsibleWidget {
 
     entitiesReloadedEvent({loadResults}) {
         if (loadResults.getAttributes().find(attr => attr.type === 'relation' && (attr.noteId === this.noteId || attr.value === this.noteId))) {
-            this.refresh();
+            this.noteSwitched();
         }
     }
 }