From 4ff7258a81378a847a05795eb3c712fc24ba35b6 Mon Sep 17 00:00:00 2001
From: umbreon22 <umbreon22@users.noreply.github.com>
Date: Fri, 29 Apr 2022 18:22:47 -0700
Subject: [PATCH] Limits the display of very large queue items to 50 at a time

---
 src/renderer/views/components/queue.ejs | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/renderer/views/components/queue.ejs b/src/renderer/views/components/queue.ejs
index fc675bd5..013cb796 100644
--- a/src/renderer/views/components/queue.ejs
+++ b/src/renderer/views/components/queue.ejs
@@ -13,12 +13,11 @@
         </div>
         <div class="queue-body" v-if="page == 'queue'">
             <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
-                <template v-for="(queueItem, position) in queueItems">
-                    <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
+                <template v-for="(queueItem, position) in displayQueueItems">
                     <div class="cd-queue-item"
                          :class="{selected: selectedItems.includes(position)}"
                          @click="select($event, position)"
-                         @dblclick="playQueueItem(position)" v-else :key="position"
+                         @dblclick="playQueueItem(position)" :key="position"
                          @contextmenu="selected = position;queueContext($event, queueItem.item, position)">
                         <div class="row">
                             <div class="col-auto flex-center">
@@ -61,6 +60,13 @@
                 app: this.$root
             }
         },
+        computed: {
+            displayQueueItems() {
+                const displayLimit = 50;
+                const lastDisplayPosition = Math.min(displayLimit + this.queuePosition, this.queueItems.length);
+                return this.queueItems.slice(this.queuePosition, lastDisplayPosition);
+            }
+        },
         mounted() {
             this.updateQueue()
         },