Merge pull request #26 from buggregator/issue/#17-add-virtualisation

Issue/#17 add virtualisation

Author: butschster

components/PreviewCard/PreviewCard.vue

@@ -11,20 +11,26 @@
       :event-type="event.type"
       :event-id="event.id"
       :tags="normalizedTags"
-      :is-open="!isCollapsed"
-      :is-visible-controls="isVisibleControls"
+      :is-open="!isCollapsed && !isOptimized"
+      :is-visible-controls="isVisibleControls && !isOptimized"
       @toggle-view="toggle"
       @delete="deleteEvent"
       @copy="copyCode"
       @download="downloadImage"
     />
 
-    <div v-if="!isCollapsed" ref="event_body" class="preview-card__body">
+    <div
+      v-if="!isCollapsed && !isOptimized"
+      ref="event_body"
+      class="preview-card__body"
+    >
       <slot />
     </div>
 
     <PreviewCardFooter
-      v-if="!isCollapsed && (normalizedOrigin || event.serverName)"
+      v-if="
+        !isCollapsed && !isOptimized && (normalizedOrigin || event.serverName)
+      "
       class="preview-card__footer"
       :server-name="event.serverName"
       :origin-config="normalizedOrigin"
@@ -34,8 +40,9 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { toPng, toBlob } from "html-to-image";
+import { toBlob, toPng } from "html-to-image";
 import download from "downloadjs";
+import debounce from "lodash.debounce";
 import PreviewCardFooter from "~/components/PreviewCardFooter/PreviewCardFooter.vue";
 import PreviewCardHeader from "~/components/PreviewCardHeader/PreviewCardHeader.vue";
 import { NormalizedEvent } from "~/config/types";
@@ -50,7 +57,7 @@ export default defineComponent({
   },
   props: {
     event: {
-      type: Object as PropType<NormalizedEvent<unknown>>,
+      type: Object as PropType<NormalizedEvent>,
       required: true,
     },
   },
@@ -70,6 +77,7 @@ export default defineComponent({
   data() {
     return {
       isCollapsed: false,
+      isOptimized: false,
       isVisibleControls: true,
     };
   },
@@ -93,6 +101,12 @@ export default defineComponent({
       return `${this.event.type}-${this.event.id}.png`;
     },
   },
+  mounted() {
+    window.addEventListener("scroll", this.optimiseRenderHidden());
+  },
+  beforeUnmount() {
+    window.removeEventListener("scroll", this.optimiseRenderHidden());
+  },
   methods: {
     toggle(): void {
       this.isCollapsed = !this.isCollapsed;
@@ -131,6 +145,26 @@ export default defineComponent({
           });
       }
     },
+    optimiseRenderHidden() {
+      return debounce(() => {
+        if (this.$refs.event) {
+          const eventNode = this.$refs.event as HTMLElement;
+          const { top, height } = eventNode.getBoundingClientRect();
+          const extraDelta = height;
+          const isVisible =
+            top - extraDelta <= window.innerHeight &&
+            top + height + extraDelta * 2 >= 0;
+
+          if (!isVisible && !this.isOptimized) {
+            this.isOptimized = true;
+            eventNode.style.height = `${eventNode.clientHeight}px`;
+          } else if (isVisible && this.isOptimized) {
+            this.isOptimized = false;
+            eventNode.style.height = "auto";
+          }
+        }
+      }, 30);
+    },
   },
 });
 </script>

components/PreviewEventMapper/PreviewEventMapper.stories.ts

@@ -1,16 +1,16 @@
 import { Meta, Story } from "@storybook/vue3";
-import PreviewEventMapper from '~/components/PreviewEventMapper/PreviewEventMapper.vue';
-import monologEventMock from '~/mocks/monolog.json'
-import sentryEventMock from '~/mocks/sentry-spiral.json'
-import smtpEventMock from '~/mocks/smtp-welcome.json'
-import varDumpEventMock from '~/mocks/var-dump-object.json'
-import profilerEventMock from '~/mocks/profiler.json'
-import inspectorEventMock from '~/mocks/inspector.json'
-import httpDumpEventMock from '~/mocks/http-dump.json'
+import PreviewEventMapper from "~/components/PreviewEventMapper/PreviewEventMapper.vue";
+import monologEventMock from "~/mocks/monolog.json";
+import sentryEventMock from "~/mocks/sentry-spiral.json";
+import smtpEventMock from "~/mocks/smtp-welcome.json";
+import varDumpEventMock from "~/mocks/var-dump-object.json";
+import profilerEventMock from "~/mocks/profiler.json";
+import inspectorEventMock from "~/mocks/inspector.json";
+import httpDumpEventMock from "~/mocks/http-dump.json";
 
 export default {
   title: "Preview/PreviewEventMapper",
-  component: PreviewEventMapper
+  component: PreviewEventMapper,
 } as Meta<typeof PreviewEventMapper>;
 
 const Template: Story = (args) => ({
@@ -26,7 +26,7 @@ const Template: Story = (args) => ({
 export const Default = Template.bind({});
 
 Default.args = {
-  event: { ...smtpEventMock, type: 'unknown' },
+  event: { ...smtpEventMock, type: "unknown" },
 };
 
 export const Monolog = Template.bind({});
@@ -70,21 +70,57 @@ HttpDump.args = {
   event: httpDumpEventMock,
 };
 
+const eventsList = [
+  monologEventMock,
+  sentryEventMock,
+  smtpEventMock,
+  varDumpEventMock,
+  profilerEventMock,
+  inspectorEventMock,
+  httpDumpEventMock,
+];
+
 const TemplateList: Story = (args) => ({
   components: { PreviewEventMapper },
   setup() {
-
     return {
       args,
-      eventsList: [monologEventMock,sentryEventMock,smtpEventMock,varDumpEventMock,profilerEventMock,inspectorEventMock,httpDumpEventMock]
+      eventsList,
     };
   },
   template: `<PreviewEventMapper class="border-b" v-for="event in eventsList" :event="event" :key="event.uuid"/>`,
 });
 
-
 export const EventsList = TemplateList.bind({});
 
 EventsList.args = {
   event: inspectorEventMock,
 };
+
+const TemplateListVirtual: Story = (args) => ({
+  components: { PreviewEventMapper },
+  setup() {
+    return {
+      args,
+      eventsList: eventsList
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .map((item, index) => ({ ...item, uuid: String(index + 1) })) // make uniq ids
+        .sort(() => Math.random() - 0.5), // shuffle
+    };
+  },
+  template: `
+    <template v-for="item in eventsList">
+      <PreviewEventMapper class="border-b" :event="item" />
+    </template>
+  `,
+});
+
+export const EventsListVirtual = TemplateListVirtual.bind({});
+
+EventsListVirtual.args = {
+  event: inspectorEventMock,
+};

package.json

@@ -35,6 +35,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-vite": "^0.3.0",
     "@types/downloadjs": "^1.4.3",
+    "@types/lodash.debounce": "^4.0.7",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -70,6 +71,7 @@
     "flame-chart-js": "^2.3.1",
     "highlight.js": "^11.7.0",
     "html-to-image": "^1.11.4",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.29.4",
     "nuxt": "3.3.3",
     "pinia": "^2.0.30",