feat: Lazy load diagrams

getappmap · Mar 26, 2024 · c6ee367 · c6ee367
1 parent d50d24a
commit c6ee367
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 31 deletions.
diff --git a/packages/components/src/components/LazyLoader.vue b/packages/components/src/components/LazyLoader.vue
@@ -0,0 +1,40 @@
+<template>
+  <div v-if="shouldRender" class="lazy-loader-container">
+    <slot />
+  </div>
+  <v-loading-spinner v-else />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import VLoadingSpinner from '@/components/LoadingSpinner.vue';
+
+export default Vue.extend({
+  name: 'v-lazy-loader',
+
+  components: {
+    VLoadingSpinner,
+  },
+
+  data() {
+    return {
+      shouldRender: false,
+    };
+  },
+
+  mounted() {
+    Vue.nextTick(() => {
+      setTimeout(() => {
+        this.shouldRender = true;
+      }, 0);
+    });
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.lazy-loader-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/packages/components/src/components/LoadingSpinner.vue b/packages/components/src/components/LoadingSpinner.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="loading-background">
+    <div class="loading-spinner"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'v-loading-spinner',
+};
+</script>
+
+<style scoped lang="scss">
+.loading-background {
+  width: 100%;
+  height: 100%;
+  background-color: $gray1;
+
+  .loading-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 64px;
+      height: 64px;
+      margin: 8px;
+      border-radius: 50%;
+      border: 6px solid transparent;
+      border-color: $hotpink transparent $hotpink transparent;
+      animation: loader-animation 1.2s linear infinite;
+    }
+  }
+}
+</style>
diff --git a/packages/components/src/pages/VsCodeExtension.vue b/packages/components/src/pages/VsCodeExtension.vue
@@ -80,10 +80,12 @@
           :tabName="VIEW_COMPONENT"
           :ref="VIEW_COMPONENT"
         >
-          <v-diagram-component
-            :class-map="filteredAppMap.classMap"
-            :highlighted-event-index="eventFilterMatchIndex"
-          />
+          <v-lazy-loader>
+            <v-diagram-component
+              :class-map="filteredAppMap.classMap"
+              :highlighted-event-index="eventFilterMatchIndex"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <v-tab
@@ -93,28 +95,32 @@
           :tabName="VIEW_SEQUENCE"
           :allow-scroll="true"
         >
-          <v-diagram-sequence
-            ref="viewSequence_diagram"
-            :app-map="filteredAppMap"
-            :collapse-depth="seqDiagramCollapseDepth"
-            :highlighted-event-index="eventFilterMatchIndex"
-            @setMaxSeqDiagramCollapseDepth="setMaxSeqDiagramCollapseDepth"
-            @updateCollapseDepth="handleNewCollapseDepth"
-          />
+          <v-lazy-loader>
+            <v-diagram-sequence
+              ref="viewSequence_diagram"
+              :app-map="filteredAppMap"
+              :collapse-depth="seqDiagramCollapseDepth"
+              :highlighted-event-index="eventFilterMatchIndex"
+              @setMaxSeqDiagramCollapseDepth="setMaxSeqDiagramCollapseDepth"
+              @updateCollapseDepth="handleNewCollapseDepth"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <v-tab name="Trace View" :is-active="isViewingFlow" :tabName="VIEW_FLOW" :ref="VIEW_FLOW">
           <div class="trace-view">
-            <v-diagram-trace
-              ref="viewFlow_diagram"
-              :events="filteredAppMap.rootEvents()"
-              :event-filter-matches="new Set(eventFilterMatches)"
-              :event-filter-match="eventFilterMatch"
-              :event-filter-match-index="eventFilterMatchIndex + 1"
-              :name="VIEW_FLOW"
-              :zoom-controls="true"
-              @clickEvent="onClickTraceEvent"
-            />
+            <v-lazy-loader>
+              <v-diagram-trace
+                ref="viewFlow_diagram"
+                :events="filteredAppMap.rootEvents()"
+                :event-filter-matches="new Set(eventFilterMatches)"
+                :event-filter-match="eventFilterMatch"
+                :event-filter-match-index="eventFilterMatchIndex + 1"
+                :name="VIEW_FLOW"
+                :zoom-controls="true"
+                @clickEvent="onClickTraceEvent"
+              />
+            </v-lazy-loader>
           </div>
         </v-tab>
 
@@ -125,13 +131,15 @@
           :tabName="VIEW_FLAMEGRAPH"
           :allow-scroll="false"
         >
-          <v-diagram-flamegraph
-            ref="viewFlamegraph_diagram"
-            :events="filteredAppMap.rootEvents()"
-            :title="filteredAppMap.name"
-            :highlighted-event-index="eventFilterMatchIndex"
-            @select="onFlamegraphSelect"
-          />
+          <v-lazy-loader>
+            <v-diagram-flamegraph
+              ref="viewFlamegraph_diagram"
+              :events="filteredAppMap.rootEvents()"
+              :title="filteredAppMap.name"
+              :highlighted-event-index="eventFilterMatchIndex"
+              @select="onFlamegraphSelect"
+            />
+          </v-lazy-loader>
         </v-tab>
 
         <template v-slot:notification>
@@ -439,6 +447,7 @@ import isPrecomputedSequenceDiagram from '@/lib/isPrecomputedSequenceDiagram';
 import { SAVED_FILTERS_STORAGE_ID } from '../components/FilterMenu.vue';
 import { DEFAULT_SEQ_DIAGRAM_COLLAPSE_DEPTH } from '../components/DiagramSequence.vue';
 import VCompassIcon from '@/assets/compass-simpler.svg';
+import VLazyLoader from '@/components/LazyLoader.vue';
 
 const browserPrefixes = ['', 'webkit', 'moz'];
 
@@ -479,6 +488,7 @@ export default {
     VUnlicensedNotice,
     VConfigurationRequired,
     VCompassIcon,
+    VLazyLoader,
   },
   store,
   data() {
@@ -1467,9 +1477,11 @@ export default {
     if (this.isGiantAppMap) {
       this.showStatsPanel = true;
       this.setView(null);
+    } else if (this.showStatsPanel && this.currentView === null) {
+      this.showStatsPanel = false;
+      this.setView(this.defaultView);
     }
   },
-
   beforeDestroy() {
     browserPrefixes.forEach((prefix) => {
       document.removeEventListener(prefix + 'fullscreenchange', this.checkFullscreen);

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -13,7 +13,7 @@
     "useDefineForClassFields": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "jest"],
+    "types": ["webpack-env", "jest", "vue/types/vue"],
     "paths": {
       "@/*": ["src/*"]
     },