From 7288861515ffb81d23ddcbce6446f0ad7726cab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Marseault?=
 <22910497+Larsluph@users.noreply.github.com>
Date: Fri, 5 Jan 2024 17:48:13 +0100
Subject: [PATCH] perf(add-torrent): Use scrollable dialog instead of manual
 infinite scroll (#1442)

---
 src/components/Dialogs/AddTorrentDialog.vue | 437 ++++++++++----------
 1 file changed, 217 insertions(+), 220 deletions(-)

diff --git a/src/components/Dialogs/AddTorrentDialog.vue b/src/components/Dialogs/AddTorrentDialog.vue
index 2c43f3d7..31856385 100644
--- a/src/components/Dialogs/AddTorrentDialog.vue
+++ b/src/components/Dialogs/AddTorrentDialog.vue
@@ -181,6 +181,7 @@ const onCategoryChanged = () => {
     v-model="isOpened"
     :class="$vuetify.display.mobile ? '' : 'w-75'"
     :fullscreen="$vuetify.display.mobile"
+    scrollable
     :transition="openSuddenly ? 'none' : 'dialog-bottom-transition'">
     <v-card>
       <v-card-title>
@@ -190,236 +191,232 @@ const onCategoryChanged = () => {
         </v-toolbar>
       </v-card-title>
 
-      <v-infinite-scroll mode="manual">
-        <v-card-text>
-          <v-row>
-            <v-col cols="12">
-              <v-file-input
-                v-model="files"
-                :label="t('dialogs.add.files')"
-                :show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
-                accept=".torrent"
-                counter
-                multiple
-                persistent-clear
-                persistent-hint
-                prepend-icon=""
-                variant="outlined">
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-paperclip</v-icon>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12">
+            <v-file-input
+              v-model="files"
+              :label="t('dialogs.add.files')"
+              :show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
+              accept=".torrent"
+              counter
+              multiple
+              persistent-clear
+              persistent-hint
+              prepend-icon=""
+              variant="outlined">
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-paperclip</v-icon>
+              </template>
+              <template v-slot:selection="{ fileNames }">
+                <template v-for="(filename, index) in fileNames">
+                  <v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
+                    {{ filename }}
+                  </v-chip>
                 </template>
-                <template v-slot:selection="{ fileNames }">
-                  <template v-for="(filename, index) in fileNames">
-                    <v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
-                      {{ filename }}
-                    </v-chip>
-                  </template>
-                  <span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
-                    {{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
-                  </span>
-                </template>
-              </v-file-input>
-              <v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-link</v-icon>
-                </template>
-              </v-textarea>
-              <HistoryField
-                v-if="!!urls"
-                v-model="cookie"
-                :historyKey="HistoryKey.COOKIE"
-                ref="cookieField"
-                clearable
-                :label="$t('dialogs.add.cookie')"
-                :placeholder="$t('dialogs.add.cookiePlaceholder')">
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-cookie</v-icon>
-                </template>
-              </HistoryField>
-              <v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-rename</v-icon>
-                </template>
-              </v-text-field>
-            </v-col>
+                <span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
+                  {{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
+                </span>
+              </template>
+            </v-file-input>
+            <v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-link</v-icon>
+              </template>
+            </v-textarea>
+            <HistoryField
+              v-if="!!urls"
+              v-model="cookie"
+              :historyKey="HistoryKey.COOKIE"
+              ref="cookieField"
+              clearable
+              :label="$t('dialogs.add.cookie')"
+              :placeholder="$t('dialogs.add.cookiePlaceholder')">
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-cookie</v-icon>
+              </template>
+            </HistoryField>
+            <v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-rename</v-icon>
+              </template>
+            </v-text-field>
+          </v-col>
 
-            <v-col cols="12" md="6">
-              <v-combobox
-                v-model="tags"
-                v-model:search="tagSearch"
-                :hide-no-data="false"
-                :items="maindataStore.tags"
-                :label="t('dialogs.add.tags')"
-                chips
-                clearable
-                hide-details
-                multiple
-                autocomplete="tags">
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-tag</v-icon>
-                </template>
-                <template v-slot:no-data>
-                  <v-list-item>
-                    <v-list-item-title v-if="tagSearch?.length > 0">
-                      {{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
-                    </v-list-item-title>
-                    <v-list-item-title v-else>
-                      {{ t('dialogs.add.noTags') }}
-                    </v-list-item-title>
-                  </v-list-item>
-                </template>
-              </v-combobox>
-            </v-col>
+          <v-col cols="12" md="6">
+            <v-combobox
+              v-model="tags"
+              v-model:search="tagSearch"
+              :hide-no-data="false"
+              :items="maindataStore.tags"
+              :label="t('dialogs.add.tags')"
+              chips
+              clearable
+              hide-details
+              multiple
+              autocomplete="tags">
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-tag</v-icon>
+              </template>
+              <template v-slot:no-data>
+                <v-list-item>
+                  <v-list-item-title v-if="tagSearch?.length > 0">
+                    {{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
+                  </v-list-item-title>
+                  <v-list-item-title v-else>
+                    {{ t('dialogs.add.noTags') }}
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-combobox>
+          </v-col>
 
-            <v-col cols="12" md="6">
-              <v-combobox
-                v-model="category"
-                v-model:search="categorySearch"
-                :hide-no-data="false"
-                :items="categories"
-                :label="$t('dialogs.add.category')"
-                clearable
-                hide-details
-                autocomplete="categories"
-                @update:modelValue="onCategoryChanged">
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-label</v-icon>
-                </template>
-                <template v-slot:no-data>
-                  <v-list-item>
-                    <v-list-item-title v-if="categorySearch?.length > 0">
-                      {{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
-                    </v-list-item-title>
-                    <v-list-item-title v-else>
-                      {{ t('dialogs.add.noCategories') }}
-                    </v-list-item-title>
-                  </v-list-item>
-                </template>
-              </v-combobox>
-            </v-col>
+          <v-col cols="12" md="6">
+            <v-combobox
+              v-model="category"
+              v-model:search="categorySearch"
+              :hide-no-data="false"
+              :items="categories"
+              :label="$t('dialogs.add.category')"
+              clearable
+              hide-details
+              autocomplete="categories"
+              @update:modelValue="onCategoryChanged">
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-label</v-icon>
+              </template>
+              <template v-slot:no-data>
+                <v-list-item>
+                  <v-list-item-title v-if="categorySearch?.length > 0">
+                    {{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
+                  </v-list-item-title>
+                  <v-list-item-title v-else>
+                    {{ t('dialogs.add.noCategories') }}
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-combobox>
+          </v-col>
 
-            <v-col cols="12">
-              <HistoryField
-                v-model="downloadPath"
-                :history-key="HistoryKey.TORRENT_PATH"
-                ref="dlPathField"
-                :disabled="form.autoTMM"
-                :label="t('dialogs.add.downloadPath')"
-                hide-details>
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-tray-arrow-down</v-icon>
-                </template>
-              </HistoryField>
-            </v-col>
+          <v-col cols="12">
+            <HistoryField
+              v-model="downloadPath"
+              :history-key="HistoryKey.TORRENT_PATH"
+              ref="dlPathField"
+              :disabled="form.autoTMM"
+              :label="t('dialogs.add.downloadPath')"
+              hide-details>
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-tray-arrow-down</v-icon>
+              </template>
+            </HistoryField>
+          </v-col>
 
-            <v-col cols="12">
-              <HistoryField
-                v-model="form.savepath"
-                :history-key="HistoryKey.TORRENT_PATH"
-                ref="savePathField"
-                :disabled="form.autoTMM"
-                :label="t('dialogs.add.savePath')"
-                hide-details>
-                <template v-slot:prepend>
-                  <v-icon color="accent">mdi-content-save</v-icon>
-                </template>
-              </HistoryField>
-            </v-col>
+          <v-col cols="12">
+            <HistoryField
+              v-model="form.savepath"
+              :history-key="HistoryKey.TORRENT_PATH"
+              ref="savePathField"
+              :disabled="form.autoTMM"
+              :label="t('dialogs.add.savePath')"
+              hide-details>
+              <template v-slot:prepend>
+                <v-icon color="accent">mdi-content-save</v-icon>
+              </template>
+            </HistoryField>
+          </v-col>
 
-            <v-col cols="12" md="6">
-              <v-select
-                v-model="form.contentLayout"
-                :items="contentLayoutOptions"
-                :label="t('constants.contentLayout.title')"
-                color="accent"
-                hide-details
-                rounded="xl"
-                variant="solo-filled" />
-            </v-col>
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="form.contentLayout"
+              :items="contentLayoutOptions"
+              :label="t('constants.contentLayout.title')"
+              color="accent"
+              hide-details
+              rounded="xl"
+              variant="solo-filled" />
+          </v-col>
 
-            <v-col cols="12" md="6">
-              <v-select
-                v-model="form.stopCondition"
-                :items="stopConditionOptions"
-                :label="t('constants.stopCondition.title')"
-                color="accent"
-                hide-details
-                rounded="xl"
-                variant="solo-filled" />
-            </v-col>
-          </v-row>
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="form.stopCondition"
+              :items="stopConditionOptions"
+              :label="t('constants.stopCondition.title')"
+              color="accent"
+              hide-details
+              rounded="xl"
+              variant="solo-filled" />
+          </v-col>
+        </v-row>
 
-          <v-row class="mx-3">
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
-            </v-col>
-          </v-row>
+        <v-row class="mx-3">
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
+          </v-col>
+        </v-row>
 
-          <v-row>
-            <v-col cols="12">
-              <v-expansion-panels>
-                <v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
-                  <v-expansion-panel-text>
-                    <v-row>
-                      <v-col cols="12" md="6">
-                        <v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
-                          <template v-slot:prepend>
-                            <v-icon color="accent">mdi-download</v-icon>
-                          </template>
-                        </v-text-field>
-                      </v-col>
-                      <v-col cols="12" md="6">
-                        <v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
-                          <template v-slot:prepend>
-                            <v-icon color="accent">mdi-upload</v-icon>
-                          </template>
-                        </v-text-field>
-                      </v-col>
+        <v-row>
+          <v-col cols="12">
+            <v-expansion-panels>
+              <v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
+                <v-expansion-panel-text>
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
+                        <template v-slot:prepend>
+                          <v-icon color="accent">mdi-download</v-icon>
+                        </template>
+                      </v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
+                        <template v-slot:prepend>
+                          <v-icon color="accent">mdi-upload</v-icon>
+                        </template>
+                      </v-text-field>
+                    </v-col>
 
-                      <v-col cols="12" md="4">
-                        <v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
-                      </v-col>
-                      <v-col cols="12" md="4">
-                        <v-text-field
-                          v-model="seedingTimeLimit"
-                          :label="$t('dialogs.add.seedingTimeLimit')"
-                          :hint="$t('dialogs.add.limitHint')"
-                          :suffix="$t('units.minutes')"
-                          type="number" />
-                      </v-col>
-                      <v-col cols="12" md="4">
-                        <v-text-field
-                          v-model="inactiveSeedingTimeLimit"
-                          :label="$t('dialogs.add.inactiveSeedingTimeLimit')"
-                          :hint="$t('dialogs.add.limitHint')"
-                          :suffix="$t('units.minutes')"
-                          type="number" />
-                      </v-col>
-                    </v-row>
-                  </v-expansion-panel-text>
-                </v-expansion-panel>
-              </v-expansion-panels>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <template v-slot:load-more></template>
-      </v-infinite-scroll>
+                    <v-col cols="12" md="4">
+                      <v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
+                    </v-col>
+                    <v-col cols="12" md="4">
+                      <v-text-field
+                        v-model="seedingTimeLimit"
+                        :label="$t('dialogs.add.seedingTimeLimit')"
+                        :hint="$t('dialogs.add.limitHint')"
+                        :suffix="$t('units.minutes')"
+                        type="number" />
+                    </v-col>
+                    <v-col cols="12" md="4">
+                      <v-text-field
+                        v-model="inactiveSeedingTimeLimit"
+                        :label="$t('dialogs.add.inactiveSeedingTimeLimit')"
+                        :hint="$t('dialogs.add.limitHint')"
+                        :suffix="$t('units.minutes')"
+                        type="number" />
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+        </v-row>
+      </v-card-text>
 
       <v-card-actions class="mb-2">
         <v-btn :text="$t('dialogs.add.resetForm')" color="error" variant="flat" @click="addTorrentStore.resetForm()" />