From 15fbc173bf18ad65674f4476a19084c57b73f0aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga.fer@gmail.com>
Date: Tue, 12 Jan 2021 17:42:52 +0100
Subject: [PATCH] perf(dom): custom DOM recycle

---
 components/Item/{ => Card}/Card.vue      |   0
 components/Item/Card/VirtualCard.vue     |  18 +
 components/Item/ItemGrid.vue             | 633 +++++++++++++++++++++--
 nuxt.config.ts                           |   1 -
 package.json                             |   3 +-
 plugins/components/vueVirtualScroller.ts |   8 -
 yarn.lock                                |  24 -
 7 files changed, 603 insertions(+), 84 deletions(-)
 rename components/Item/{ => Card}/Card.vue (100%)
 create mode 100644 components/Item/Card/VirtualCard.vue
 delete mode 100644 plugins/components/vueVirtualScroller.ts

diff --git a/components/Item/Card.vue b/components/Item/Card/Card.vue
similarity index 100%
rename from components/Item/Card.vue
rename to components/Item/Card/Card.vue
diff --git a/components/Item/Card/VirtualCard.vue b/components/Item/Card/VirtualCard.vue
new file mode 100644
index 00000000000..3c52ce6d902
--- /dev/null
+++ b/components/Item/Card/VirtualCard.vue
@@ -0,0 +1,18 @@
+<template>
+  <span>
+    <card v-if="item" :key="item.Id" :item="item" />
+  </span>
+</template>
+
+<script lang="ts">
+import { BaseItemDto } from '@jellyfin/client-axios';
+import Vue from 'vue';
+
+export default Vue.extend({
+  data() {
+    return {
+      item: undefined as undefined | BaseItemDto
+    };
+  }
+});
+</script>
diff --git a/components/Item/ItemGrid.vue b/components/Item/ItemGrid.vue
index cbf418887ac..3eb2690eb32 100644
--- a/components/Item/ItemGrid.vue
+++ b/components/Item/ItemGrid.vue
@@ -1,30 +1,11 @@
 <template>
   <div>
-    <v-row v-if="loading">
+    <v-row v-if="loading && !mounted">
       <v-col cols="12" class="card-grid-container">
         <skeleton-card v-for="n in 24" :key="n" />
       </v-col>
     </v-row>
-    <dynamic-scroller
-      v-if="items.length"
-      class="scroller"
-      :items="itemsChunks"
-      :min-item-size="350"
-      :buffer="$vuetify.breakpoint.height * 1.5"
-      page-mode
-    >
-      <template #default="{ item, index, active }">
-        <dynamic-scroller-item
-          :item="item"
-          :active="active"
-          :data-index="index"
-          class="card-grid-container"
-        >
-          <card v-for="card of item.chunk" :key="card.Id" :item="card" />
-        </dynamic-scroller-item>
-      </template>
-    </dynamic-scroller>
-    <v-row v-else-if="!loading" justify="center">
+    <v-row v-else-if="!loading && !items.length & !mounted" justify="center">
       <v-col cols="12" class="card-grid-container empty-card-container">
         <skeleton-card v-for="n in 24" :key="n" boilerplate />
       </v-col>
@@ -36,13 +17,49 @@
         </slot>
       </div>
     </v-row>
+    <v-row>
+      <v-col
+        v-show="!loading && items.length && mounted"
+        ref="cardArea"
+        cols="12"
+        class="card-grid-container"
+      />
+    </v-row>
   </div>
 </template>
 
 <script lang="ts">
-import { chunk } from 'lodash';
 import Vue from 'vue';
 import { BaseItemDto } from '@jellyfin/client-axios';
+import { xorBy, chunk, range, reverse } from 'lodash';
+import CardVue from './Card/VirtualCard.vue';
+
+const CardConstructor = Vue.extend(CardVue);
+
+interface LazyCardInstance extends Vue {
+  item: BaseItemDto;
+  $el: Element;
+}
+/**
+ * Variables that doesn't need to use Vue's reactivity system, so setting them here should
+ * improve performance as there are no Vue proxies involved.
+ *
+ * If, at some point, we will have more than one ItemGrid component rendered at the same time, we need
+ * to move all the variables here inside data(), as these variables are going to be shared with all the
+ * ItemGrid instances and that will break everything.
+ */
+let intersectedRows = [] as number[];
+let instances = [] as LazyCardInstance[];
+let chunkedItems = [] as BaseItemDto[][];
+let chunkedInstances = [] as LazyCardInstance[][];
+let rowsInViewport = 0;
+let virtualCards = 0;
+let cardsPerRow = 0;
+let cardHeight = 0;
+let virtualRows = 0;
+let realRows = 0;
+let firstRow = 0;
+let endRow = 0;
 
 export default Vue.extend({
   props: {
@@ -56,44 +73,560 @@ export default Vue.extend({
     loading: {
       type: Boolean,
       required: true
+    },
+    /**
+     * This is just an estimation of the *minimum* amount of cards that will be rendered: for the best experience,
+     * all the rows must contain the same amount of cards and additional cards will be created
+     * if the page is zoomed out. If any of both conditions take place, additional components to supply the carencies will be appended.
+     */
+    targetCards: {
+      type: Number,
+      required: false,
+      default: 150
     }
   },
-  computed: {
-    itemsChunks(): Array<{ [id: number]: BaseItemDto }> {
-      let cardsPerLine = 8;
-
-      if (this.$vuetify.breakpoint.smAndDown) {
-        cardsPerLine = 3;
-      } else if (
-        this.$vuetify.breakpoint.smAndUp &&
-        !this.$vuetify.breakpoint.lgAndUp
-      ) {
-        cardsPerLine = 4;
-      } else if (
-        this.$vuetify.breakpoint.lgAndUp &&
-        !this.$vuetify.breakpoint.xlOnly
-      ) {
-        cardsPerLine = 6;
+  data() {
+    return {
+      mounted: false,
+      observer: undefined as undefined | IntersectionObserver,
+      cardArea: undefined as undefined | HTMLElement
+    };
+  },
+  watch: {
+    items: {
+      handler(newArr: BaseItemDto[], oldArr: BaseItemDto[]): void {
+        if (this.items.length && !this.loading && !this.mounted) {
+          this.$nextTick(() => {
+            this.initComponents();
+          });
+        } else if (this.items.length) {
+          this.onItemsUpdate(newArr, oldArr);
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    mounted: {
+      handler(): void {
+        window.requestAnimationFrame(() => {
+          this.updateSentinel();
+        });
+      },
+      immediate: true
+    }
+  },
+  beforeMount(): void {
+    virtualCards = this.targetCards;
+  },
+  mounted() {
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        this.onIntersect(entry);
+      });
+    });
+    this.cardArea = this.$refs.cardArea as HTMLElement;
+    window.addEventListener('resize', this.onResize);
+    window.addEventListener('scroll', this.onScroll, { passive: true });
+  },
+  destroyed(): void {
+    this.observer?.disconnect();
+    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('scroll', this.onScroll);
+    intersectedRows = [];
+    /**
+     * TODO: Investigate if this is really needed: I (ferferga) had some memory leaks while in dev mode.
+     * I did thorough testing in production, however, that proves anything.
+     *
+     * Is important to test this as $destroy is not supported in Vue 3.
+     */
+    instances.forEach((instance) => {
+      instance.$destroy();
+    });
+    instances = [];
+    chunkedItems = [] as BaseItemDto[][];
+    chunkedInstances = [] as LazyCardInstance[][];
+    rowsInViewport = 0;
+    virtualCards = 0;
+    cardsPerRow = 0;
+    cardHeight = 0;
+    virtualRows = 0;
+    realRows = 0;
+    firstRow = 0;
+    endRow = 0;
+  },
+  methods: {
+    // eslint-disable-next-line jsdoc/require-param
+    /**
+     * Getters / setters helper functions
+     */
+    setDataItemId(target: HTMLElement | Element, item: BaseItemDto): void {
+      target.setAttribute('data-item-id', item.Id as string);
+    },
+    getDataItemId(target: HTMLElement | Element): string {
+      return target.getAttribute('data-item-id') as string;
+    },
+    setInstanceIndex(target: HTMLElement | Element, index: number): void {
+      target.setAttribute('data-instance-index', index.toString());
+    },
+    getInstanceIndex(target: HTMLElement | Element): number {
+      return parseInt(target.getAttribute('data-instance-index') as string);
+    },
+    getDataItemIndex(target: HTMLElement | Element): number {
+      return parseInt(target.getAttribute('data-item-index') as string);
+    },
+    setDataItemIndex(target: HTMLElement | Element, index: number): void {
+      target.setAttribute('data-item-index', index.toString());
+    },
+    getDataRow(target: HTMLElement | Element): number {
+      return parseInt(target.getAttribute('data-row') as string);
+    },
+    setDataRow(target: HTMLElement | Element, row: number): void {
+      target.setAttribute('data-row', row.toString());
+    },
+    /**
+     * Initializes the Vue instances that holds the card's DOM.
+     *
+     * @param {number} cardnum - Number of cards to create. If not specified, initComponents will determine it automatically.
+     */
+    initComponents(cardnum?: number | undefined): void {
+      let loop = 0;
+      let maxIterations = 0;
+      if (!cardnum) {
+        if (!instances.length) {
+          if (virtualCards > this.items.length) {
+            maxIterations = this.items.length;
+          } else {
+            maxIterations = virtualCards;
+          }
+        } else if (virtualCards > instances.length) {
+          maxIterations = virtualCards - instances.length;
+        }
+      } else {
+        maxIterations = cardnum;
+      }
+
+      while (loop < maxIterations) {
+        const item = this.items[instances.length] as BaseItemDto;
+        const card = new CardConstructor({
+          parent: this,
+          key: item?.Id,
+          data: {
+            item
+          }
+        });
+        instances.push(card);
+        card.$mount();
+        this.setInstanceIndex(card.$el, instances.length - 1);
+        this.setDataItemId(card.$el, item);
+        this.setDataItemIndex(card.$el, this.items.indexOf(item));
+        /**
+         * At this stage, cardArea is hidden with 'display: none' in the v-show directive
+         * because mounted is still not true, so no reflow it's taking place
+         * and appends are very performant
+         */
+        this.cardArea?.appendChild(card.$el);
+        this.observer?.observe(card.$el);
+        loop++;
+      }
+      this.mounted = true;
+      window.requestAnimationFrame(() => {
+        this.determineCardsPerRow();
+      });
+    },
+    /**
+     * Determines the number of cards that a row has and the height between the rows, so we can calculate
+     * the number of "virtual" rows we need to simulate.
+     */
+    determineCardsPerRow(): void {
+      cardsPerRow = 0;
+      let lastYCoord = 0;
+      for (const [index, instance] of instances.entries()) {
+        const rect = instance.$el.getBoundingClientRect();
+        if (lastYCoord === 0) {
+          lastYCoord = rect.y;
+          cardHeight = rect.height;
+        } else if (lastYCoord < rect.y) {
+          cardsPerRow = index;
+          break;
+        }
+      }
+      rowsInViewport = Math.floor(window.innerHeight / cardHeight);
+
+      chunkedInstances = chunk(instances, cardsPerRow);
+      chunkedItems = chunk(this.items, cardsPerRow) as BaseItemDto[][];
+      virtualRows = chunkedInstances.length;
+
+      if (endRow === 0) {
+        endRow = virtualRows;
+      }
+
+      /**
+       * Update the row of each of the instances
+       */
+      instances.forEach((instance) => {
+        const el = instance.$el;
+        const index = this.getDataItemIndex(el);
+        const newRow = Math.floor(index / cardsPerRow);
+        this.setDataRow(el, newRow);
+      });
+      realRows = Math.floor(this.items.length / cardsPerRow);
+
+      /**
+       * After updating the rows, we get the actual elements and sorted by item index (minor to major), as the instances
+       * index are only a reference for the correct firstRow only during mount. After scrolling, all of them are shuffled
+       * around the page, so they're no longer an indicative of the actual row order.
+       */
+      const func = this.getDataItemIndex;
+      const cards = Array.from(
+        (this.cardArea as HTMLElement).querySelectorAll(`span[data-row]`)
+      ).sort((a, b) => {
+        return func(a) - func(b);
+      });
+
+      firstRow = this.getDataRow(cards[0]);
+      endRow = this.getDataRow(cards[cards.length - 1]);
+
+      this.createExtraCards();
+      this.updateSentinel();
+      this.swapRows();
+    },
+    /**
+     * Updates the visible components after an items prop update.
+     *
+     * @param {BaseItemDto[]} changedItems - XOR of the new and old BaseItemDto array.
+     * @param {BaseItemDto[]} oldArr - Old BaseItemDto array
+     */
+    updateComponents(changedItems: BaseItemDto[], oldArr: BaseItemDto[]): void {
+      for (const item of changedItems) {
+        const oldItemIndex = oldArr.indexOf(item);
+        const newItemIndex = this.items.indexOf(item);
+        /**
+         * Queries the DOM elements of VirtualCard Vue components.
+         */
+        const target = this.cardArea?.querySelector(
+          `span[data-item-index="${newItemIndex}"]`
+        );
+        const oldTarget = this.cardArea?.querySelector(
+          `span[data-item-index="${oldItemIndex}"]`
+        );
+        /**
+         * If target exists, it means that the item index in the array was updated while it was visible to the user.
+         * If it doesn't, it means that the item was removed, or it is outside the viewport.
+         *
+         * All the item's updates for items not in the viewport will be handled by swapRows() function.
+         */
+        if (!target && !oldTarget) {
+          continue;
+        }
+
+        if (target && !oldTarget) {
+          const instance = instances[this.getInstanceIndex(target)];
+          instance.item = item;
+          this.setDataItemId(target, item);
+          instance.$el.classList.remove('d-none');
+        } else if (oldTarget && !target && oldItemIndex !== undefined) {
+          const it = this.items[oldItemIndex] as BaseItemDto;
+          if (!it) {
+            continue;
+          }
+          const instance = instances[this.getInstanceIndex(oldTarget)];
+          instance.item = it;
+          this.setDataItemId(oldTarget, it);
+          instance.$el.classList.remove('d-none');
+        } else if (target && oldTarget && oldItemIndex !== undefined) {
+          const oldIt = this.items[oldItemIndex] as BaseItemDto;
+          if (!oldIt) {
+            continue;
+          }
+          const oldInstance = instances[this.getInstanceIndex(oldTarget)];
+          const newInstance = instances[this.getInstanceIndex(target)];
+          oldInstance.item = oldIt;
+          newInstance.item = item;
+          this.setDataItemId(target, item);
+          this.setDataItemId(oldTarget, oldIt);
+          oldInstance.$el.classList.remove('d-none');
+          newInstance.$el.classList.remove('d-none');
+        }
+      }
+
+      instances.forEach((instance) => {
+        if (!this.items.includes(instance.item)) {
+          instance.$el.classList.add('d-none');
+        } else {
+          instance.$el.classList.remove('d-none');
+        }
+      });
+    },
+    /**
+     * Fires the functions that need to run after an update to the items array.
+     *
+     * @param {BaseItemDto[]} newArr - New Array.
+     * @param {BaseItemDto[]} oldArr - Original array.
+     */
+    onItemsUpdate(newArr: BaseItemDto[], oldArr: BaseItemDto[]): void {
+      if (newArr.length) {
+        if (virtualCards < instances.length) {
+          this.initComponents();
+        }
+        /**
+         * We need to reset the sentinel first so the card height can be determined properly.
+         */
+        window.requestAnimationFrame(() => {
+          this.resetSentinel();
+        });
+        this.updateComponents(
+          xorBy(newArr, oldArr, (item) => {
+            if (newArr.includes(item)) {
+              return item.Id;
+            }
+          }) as BaseItemDto[],
+          oldArr
+        );
+        window.requestAnimationFrame(() => {
+          this.determineCardsPerRow();
+        });
+      }
+    },
+    /**
+     * Checks if the last row has the same amount of cards that all the other cards. If it doesn't, it create extra cards,
+     * so all the rows  are equal.
+     */
+    createExtraCards(): void {
+      if (this.mounted && !this.loading && chunkedInstances.length) {
+        const cardsInLastRow =
+          chunkedInstances[chunkedInstances.length - 1].length;
+
+        const cardsToAdd = cardsPerRow - cardsInLastRow;
+
+        if (
+          cardsInLastRow !== cardsPerRow &&
+          virtualCards + cardsToAdd <= this.items.length
+        ) {
+          this.initComponents(cardsToAdd);
+          virtualCards += cardsToAdd;
+        }
+        chunkedInstances = chunk(instances, cardsPerRow);
+      }
+    },
+    /**
+     * When the webpage is zoomed out, more components than the ones that we already have created will need to ve visible.
+     * This is specially true when browsing a music library at 25% of zoom. We create one row with this function. IntersectionObserver
+     * will catch the callbacks for those added items and check their visibility. If more cards are still needed, onIntersect will call this function again.
+     */
+    createExtraRow(): void {
+      if (virtualCards + cardsPerRow <= this.items.length) {
+        this.initComponents(cardsPerRow);
+        endRow++;
+        virtualRows++;
+        virtualCards += cardsPerRow;
+      }
+    },
+    /**
+     * Make the scrollbar appear as if we were scrolling the real items
+     */
+    updateSentinel(): void {
+      if (realRows <= virtualRows) {
+        this.resetSentinel();
+      } else {
+        const topSpace = firstRow * cardHeight;
+        const bottomSpace = realRows * cardHeight - endRow * cardHeight;
+        (this.cardArea as HTMLElement).style.marginBottom = `${bottomSpace}px`;
+        (this.cardArea as HTMLElement).style.marginTop = `${topSpace}px`;
       }
+    },
+    resetSentinel(): void {
+      (this.cardArea as HTMLElement).style.marginBottom = '0px';
+      (this.cardArea as HTMLElement).style.marginTop = '0px';
+    },
+    /**
+     * Moves a row to the bottom.
+     *
+     * @param {number} row - The row number to move to the bottom
+     */
+    rowToBottom(row: number): void {
+      const func = this.getDataItemIndex;
+      const cards = Array.from(
+        (this.cardArea as HTMLElement).querySelectorAll(
+          `span[data-row="${row}"]`
+        )
+      ).sort((a, b) => {
+        return func(a) - func(b);
+      });
 
-      const chunks = chunk(this.items, cardsPerLine);
+      const resultingRow = endRow + 1;
+      const itemRow = chunkedItems[resultingRow];
 
-      return chunks.map((itemChunk, index) => {
-        return {
-          id: index,
-          chunk: itemChunk
-        };
+      if (itemRow && cards.length > 0) {
+        for (const [index, elem] of cards.entries()) {
+          /**
+           * We could append the item directly to move it, but removing it and doing all the operations offscreen
+           * provides better performance.
+           */
+          this.cardArea?.removeChild(elem);
+          this.setDataRow(elem, resultingRow);
+          const instance = instances[this.getInstanceIndex(elem)];
+          const item = itemRow[index];
+          if (!item) {
+            elem.classList.add('d-none');
+          } else {
+            elem.classList.remove('d-none');
+            this.setDataItemIndex(elem, this.items.indexOf(item));
+            this.setDataItemId(elem, item);
+            instance.item = item;
+          }
+          this.cardArea?.appendChild(elem);
+        }
+        firstRow++;
+        endRow++;
+        this.updateSentinel();
+      }
+    },
+    /**
+     * Moves a row to the top.
+     *
+     * @param {number} row - The row number to move to the top
+     */
+    rowToTop(row: number): void {
+      const func = this.getDataItemIndex;
+      const cards = Array.from(
+        (this.cardArea as HTMLElement).querySelectorAll(
+          `span[data-row="${row}"]`
+        )
+      ).sort((a, b) => {
+        return func(b) - func(a);
       });
+
+      const resultingRow = firstRow - 1;
+      const itemRow = chunkedItems[resultingRow];
+
+      const elemArr = [];
+      if (itemRow && cards.length > 0) {
+        for (const [index, elem] of cards.entries()) {
+          /**
+           * We could append the item directly to move it, but removing it and doing all the operations offscreen
+           * provides better performance.
+           */
+          this.cardArea?.removeChild(elem);
+          this.setDataRow(elem, resultingRow);
+          const instance = instances[this.getInstanceIndex(elem)];
+          const item = itemRow[index];
+          elem.classList.remove('d-none');
+          this.setDataItemIndex(elem, this.items.indexOf(item));
+          this.setDataItemId(elem, item);
+          instance.item = item;
+          elemArr.push(elem);
+        }
+
+        /**
+         * We need to append them in reverse order. We can't do this in the main loop, as we will be reversing the
+         * order of the items but not the appends itself, which is what we need to do.
+         */
+        reverse(elemArr).forEach((elem) => {
+          this.cardArea?.insertBefore(elem, this.cardArea?.firstChild);
+        });
+
+        firstRow--;
+        endRow--;
+        this.updateSentinel();
+      }
+    },
+    /**
+     * Handles all the logic for swapping rows to the top or to the bottom.
+     */
+    swapRows(): void {
+      if (this.mounted && !this.loading) {
+        let topRang = [] as number[];
+        let botRang = [] as number[];
+        /**
+         * This gives us the realRow equivalent of the row that it's located at the top of the viewport
+         */
+        const visibleRow = Math.floor(window.scrollY / cardHeight);
+        /**
+         * This will give us the realRow equivalent of the centered row in the viewport
+         */
+        const centeredRow = visibleRow + Math.ceil(rowsInViewport / 2);
+        /**
+         * This will give us the realRow equivalent of the centered row in viewport of the virtual cards.
+         */
+        const virtualCenteredRow = Math.ceil(virtualRows / 2) + firstRow;
+        /**
+         * This give us the minimum top row that must be present in our virtual cards.
+         */
+        const minTopRow = centeredRow - virtualCenteredRow + firstRow;
+
+        if (centeredRow > virtualCenteredRow) {
+          if (minTopRow <= 0) {
+            topRang = range(firstRow, 0);
+          } else {
+            topRang = range(firstRow, minTopRow + 1);
+          }
+        }
+        /**
+         * This gives us the minimum bottom row that must be present in our virtual cards.
+         */
+        const minBotRow = minTopRow + virtualRows;
+
+        if (centeredRow < virtualCenteredRow) {
+          if (minBotRow >= realRows) {
+            botRang = range(endRow, realRows);
+          } else {
+            botRang = range(endRow, minBotRow);
+          }
+        }
+
+        topRang.forEach((row) => {
+          this.rowToBottom(row);
+        });
+        botRang.forEach((row) => {
+          this.rowToTop(row);
+        });
+      }
+    },
+    /**
+     * Handles the IntersectionObserver callback.
+     *
+     * @param {IntersectionObserverEntry} entry - entry of the intersection observer.
+     */
+    onIntersect(entry: IntersectionObserverEntry): void {
+      if (entry.isIntersecting) {
+        intersectedRows.push(this.getDataRow(entry.target));
+      } else {
+        intersectedRows.splice(
+          intersectedRows.indexOf(this.getDataRow(entry.target), 1)
+        );
+      }
+
+      if (
+        intersectedRows.length === virtualCards &&
+        this.items.length > intersectedRows.length
+      ) {
+        /**
+         * We create three extra rows, instead of one to have more "buffer" space. If there are still more items that must be visible,
+         * this IntersectionObserver callback will be called again and create 3 rows more for us.
+         */
+        this.createExtraRow();
+        this.createExtraRow();
+        this.createExtraRow();
+      }
+    },
+    /**
+     * Handles all the resizing events
+     */
+    onResize(): void {
+      if (this.mounted && !this.loading) {
+        window.requestAnimationFrame(async () => {
+          await this.determineCardsPerRow();
+        });
+      }
+    },
+    onScroll(): void {
+      this.swapRows();
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.scroller {
-  max-height: 100%;
-}
-
 .empty-card-container {
   max-height: 90vh;
   overflow: hidden;
@@ -107,11 +640,13 @@ export default Vue.extend({
   transform: translate(-50%, -50%);
 }
 
-@import '~vuetify/src/styles/styles.sass';
 .card-grid-container {
+  content-visibility: auto;
+  user-select: none;
   display: grid;
 }
 
+@import '~vuetify/src/styles/styles.sass';
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
   .card-grid-container {
     grid-template-columns: repeat(3, minmax(calc(100% / 3), 1fr));
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e383c147ae7..1558d9bdd6b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -79,7 +79,6 @@ const config: NuxtConfig = {
     'plugins/nativeWebsocketPlugin.ts',
     // Components
     'plugins/components/swiper.ts',
-    'plugins/components/vueVirtualScroller.ts',
     'plugins/components/veeValidate.ts',
     // Utility
     'plugins/browserDetection.ts',
diff --git a/package.json b/package.json
index 3b73e276cc0..b5b5bdc7d8c 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,7 @@
     "uuid": "^8.3.2",
     "vee-validate": "^3.4.5",
     "vue-awesome-swiper": "^4.1.1",
-    "vue-native-websocket": "^2.0.14",
-    "vue-virtual-scroller": "^1.0.10"
+    "vue-native-websocket": "^2.0.14"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
diff --git a/plugins/components/vueVirtualScroller.ts b/plugins/components/vueVirtualScroller.ts
deleted file mode 100644
index 824f7ce3785..00000000000
--- a/plugins/components/vueVirtualScroller.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Vue from 'vue';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need to build a Type package for the module
-// @ts-ignore
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
-
-Vue.component('DynamicScroller', DynamicScroller);
-Vue.component('DynamicScrollerItem', DynamicScrollerItem);
diff --git a/yarn.lock b/yarn.lock
index f5420c31368..fafac59704c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12354,11 +12354,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scrollparent@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
-  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
-
 seek-bzip@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4"
@@ -14123,16 +14118,6 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
-vue-observe-visibility@^0.4.4:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
-  integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
-
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-router@^3.4.9:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
@@ -14173,15 +14158,6 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-virtual-scroller@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz#fdf243240001f05bd79aa77f2e2e60403760e2fb"
-  integrity sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==
-  dependencies:
-    scrollparent "^2.0.1"
-    vue-observe-visibility "^0.4.4"
-    vue-resize "^0.4.5"
-
 vue@^2.6.10, vue@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"