Improve performance of rendering large reports

Instead of rendering all report items in 4 big lists, we make use of
vue-virtual-scroll-list and render only few dozens at once. This
improves the performance in several metrics:

- Initial load time
- Memory Pressure
- CPU Load
- DOM node count

In an example with around 11k reported security vulnerabilities:

- Initial load time: 27s -> 4.1s
- Memory Pressure: ~750 MB -> ~270 MB
- CPU Load (time spent on executing JS/Rendering): 22s -> 2.5s
- DOM node count: 430k -> 7k up to 30k while scrolling

1 files changed, 42 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue
new file mode 100644
index 00000000000..63034a45f77
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue
@@ -0,0 +1,42 @@
+<script>
+import VirtualList from 'vue-virtual-scroll-list';
+
+export default {
+  name: 'SmartVirtualList',
+  components: { VirtualList },
+  props: {
+    size: { type: Number, required: true },
+    length: { type: Number, required: true },
+    remain: { type: Number, required: true },
+    rtag: { type: String, default: 'div' },
+    wtag: { type: String, default: 'div' },
+    wclass: { type: String, default: null },
+  },
+};
+</script>
+<template>
+  <virtual-list
+    v-if="length > remain"
+    v-bind="$attrs"
+    :size="remain"
+    :remain="remain"
+    :rtag="rtag"
+    :wtag="wtag"
+    :wclass="wclass"
+    class="js-virtual-list"
+  >
+    <slot></slot>
+  </virtual-list>
+  <component
+    :is="rtag"
+    v-else
+    class="js-plain-element"
+  >
+    <component
+      :is="wtag"
+      :class="wclass"
+    >
+      <slot></slot>
+    </component>
+  </component>
+</template>