Fix: Duplicates when click spam loading elements in FT (3/3)

src/renderer/components/CommentSection/CommentSection.css

@@ -183,6 +183,12 @@
   color: var(--title-color);
 }
 
+.commentLoadingMoreReplies {
+  font-size: 11px;
+  margin-inline-start: 5px;
+  color: var(--title-color);
+}
+
 .commentReplies {
   margin-inline-start: 30px;
 }
@@ -194,6 +200,11 @@
   text-decoration: underline;
 }
 
+.loadingMoreReplies {
+  margin-inline-start: 30px;
+  font-size: 15px;
+}
+
 .getMoreComments {
   padding-block-end: 1em;
   text-align: center;

src/renderer/components/CommentSection/CommentSection.vue

@@ -156,7 +156,7 @@
             />
           </span>
           <span
-            v-if="comment.numReplies > 0"
+            v-if="comment.numReplies > 0 && !commentRepliesLoading.has(index)"
             class="commentMoreReplies"
             role="button"
             tabindex="0"
@@ -168,6 +168,15 @@
               {{ toggleCommentRepliesLinkText(comment) }}
             </span>
           </span>
+          <span
+            v-else-if="comment.numReplies > 0 && commentRepliesLoading.has(index)"
+            class="commentLoadingMoreReplies"
+            tabindex="0"
+          >
+            <span>
+              {{ $t("Comments.Loading replies") }}
+            </span>
+          </span>
         </p>
         <div
           v-if="comment.showReplies"
@@ -272,7 +281,7 @@
             </p>
           </div>
           <div
-            v-if="comment.hasReplyToken"
+            v-if="comment.hasReplyToken && !commentRepliesLoading.has(index)"
             class="showMoreReplies"
             role="button"
             tabindex="0"
@@ -282,6 +291,13 @@
           >
             <span>{{ $t("Comments.Show More Replies") }}</span>
           </div>
+          <div
+            v-else-if="comment.hasReplyToken && commentRepliesLoading.has(index)"
+            class="loadingMoreReplies"
+            tabindex="0"
+          >
+            <span>{{ $t("Comments.Loading replies") }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -380,6 +396,8 @@ const props = defineProps({
 })
 
 const isLoading = ref(false)
+const commentRepliesLoading = ref(new Set())
+const isMoreCommentsLoading = ref(false)
 const showComments = ref(false)
 const nextPageToken = shallowRef(null)
 
@@ -420,7 +438,7 @@ const canPerformInitialCommentLoading = computed(() => {
 })
 
 const canPerformMoreCommentLoading = computed(() => {
-  return commentData.value.length > 0 && !isLoading.value && showComments.value && !!nextPageToken.value
+  return commentData.value.length > 0 && !isLoading.value && showComments.value && !!nextPageToken.value && !isMoreCommentsLoading.value
 })
 
 const observeVisibilityOptions = computed(() => {
@@ -513,19 +531,25 @@ function getCommentData() {
   }
 }
 
-function getMoreComments() {
+async function getMoreComments() {
   if (commentData.value.length === 0 || nextPageToken.value == null) {
     showToast(t('Comments.There are no more comments for this video'))
   } else {
+    if (isMoreCommentsLoading.value) return
+
+    isMoreCommentsLoading.value = true
+
     if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
       if (!props.isPostComments) {
-        getCommentDataInvidious()
+        await getCommentDataInvidious()
       } else {
-        getPostCommentsInvidious()
+        await getPostCommentsInvidious()
       }
     } else {
-      getCommentDataLocal(true)
+      await getCommentDataLocal(true)
     }
+
+    isMoreCommentsLoading.value = false
   }
 }
 
@@ -563,16 +587,22 @@ function toggleCommentReplies(index) {
 /**
  * @param {number} index
  */
-function getCommentReplies(index) {
+async function getCommentReplies(index) {
+  if (commentRepliesLoading.value.has(index)) return
+
+  commentRepliesLoading.value.add(index)
+
   if (!process.env.SUPPORTS_LOCAL_API || commentData.value[index].dataType === 'invidious') {
     if (!props.isPostComments) {
-      getCommentRepliesInvidious(index)
+      await getCommentRepliesInvidious(index)
     } else {
-      getPostCommentRepliesInvidious(index)
+      await getPostCommentRepliesInvidious(index)
     }
   } else {
-    getCommentRepliesLocal(index)
+    await getCommentRepliesLocal(index)
   }
+
+  commentRepliesLoading.value.delete(index)
 }
 
 /** @type {Map<string, (import('youtubei.js').YTNodes.CommentThread | string)>} */
@@ -649,9 +679,9 @@ async function getCommentDataLocal(more = false) {
       localCommentsInstance = undefined
       showToast(t('Falling back to Invidious API'))
       if (props.isPostComments) {
-        getPostCommentsInvidious()
+        await getPostCommentsInvidious()
       } else {
-        getCommentDataInvidious()
+        await getCommentDataInvidious()
       }
     } else {
       isLoading.value = false
@@ -663,8 +693,6 @@ async function getCommentDataLocal(more = false) {
  * @param {number} index
  */
 async function getCommentRepliesLocal(index) {
-  showToast(t('Comments.Getting comment replies, please wait'))
-
   try {
     const comment = commentData.value[index]
     /** @type {import('youtubei.js').YTNodes.CommentThread} */
@@ -701,7 +729,7 @@ async function getCommentRepliesLocal(index) {
     })
     if (backendFallback.value && backendPreference.value === 'local') {
       showToast(t('Falling back to Invidious API'))
-      getCommentDataInvidious()
+      await getCommentDataInvidious()
     } else {
       isLoading.value = false
     }
@@ -752,7 +780,7 @@ async function getCommentDataInvidious() {
 
     if (process.env.SUPPORTS_LOCAL_API && backendFallback.value && backendPreference.value === 'invidious') {
       showToast(t('Falling back to Local API'))
-      getCommentDataLocal()
+      await getCommentDataLocal()
     } else {
       isLoading.value = false
     }
@@ -763,8 +791,6 @@ async function getCommentDataInvidious() {
  * @param {number} index
  */
 async function getCommentRepliesInvidious(index) {
-  showToast(t('Comments.Getting comment replies, please wait'))
-
   const comment = commentData.value[index]
   const replyToken = replyTokens.get(comment.id)
 
@@ -793,13 +819,15 @@ async function getCommentRepliesInvidious(index) {
   }
 }
 
-function getPostCommentsInvidious() {
-  const fetchComments = nextPageToken.value == null
-    ? getInvidiousCommunityPostComments({ postId: props.id, authorId: props.postAuthorId })
-    : getInvidiousCommunityPostCommentReplies({ postId: props.id, replyToken: nextPageToken.value, authorId: props.postAuthorId })
+async function getPostCommentsInvidious() {
+  try {
+    const fetchComments = nextPageToken.value == null
+      ? getInvidiousCommunityPostComments({ postId: props.id, authorId: props.postAuthorId })
+      : getInvidiousCommunityPostCommentReplies({ postId: props.id, replyToken: nextPageToken.value, authorId: props.postAuthorId })
 
-  fetchComments.then(({ response, commentData: comments, continuation }) => {
-    comments = comments.map(({ replyToken, ...comment }) => {
+    const { response, commentData: comments, continuation } = await fetchComments
+
+    const parsedComments = comments.map(({ replyToken, ...comment }) => {
       if (comment.hasReplyToken) {
         replyTokens.set(comment.id, replyToken)
       } else {
@@ -809,11 +837,11 @@ function getPostCommentsInvidious() {
       return comment
     })
 
-    commentData.value = commentData.value.concat(comments)
+    commentData.value = commentData.value.concat(parsedComments)
     nextPageToken.value = response?.continuation ?? continuation
     isLoading.value = false
     showComments.value = true
-  }).catch((err) => {
+  } catch (err) {
     console.error(err)
     const errorMessage = t('Invidious API Error (Click to copy)')
     showToast(`${errorMessage}: ${err}`, 10000, () => {
@@ -822,16 +850,14 @@ function getPostCommentsInvidious() {
 
     if (process.env.SUPPORTS_LOCAL_API && backendFallback.value && backendPreference.value === 'invidious') {
       showToast(t('Falling back to Local API'))
-      getCommentDataLocal()
+      await getCommentDataLocal()
     } else {
       isLoading.value = false
     }
-  })
+  }
 }
 
 async function getPostCommentRepliesInvidious(index) {
-  showToast(t('Comments.Getting comment replies, please wait'))
-
   const comment = commentData.value[index]
   const replyToken = replyTokens.get(comment.id)
 

static/locales/ar.yaml

@@ -908,7 +908,6 @@ Mini Player: 'المشغل المصغّر'
 Comments:
   Comments: 'التعليقات'
   Click to View Comments: 'انقر لمشاهدة التعليقات'
-  Getting comment replies, please wait: 'جاري الحصول على ردود التعليق, يرجى الانتظار'
   Hide Comments: 'إخفاء التعليقات'
   # Context: View 10 Replies, View 1 Reply
   There are no comments available for this video: 'لا يتوفر تعليقات لهذا الفيديو'

static/locales/awa.yaml

@@ -896,7 +896,6 @@ Mini Player: ''
 Comments:
   Comments: ''
   Click to View Comments: ''
-  Getting comment replies, please wait: ''
   There are no more comments for this video: ''
   Hide Comments: ''
   Top comments: ''

static/locales/be.yaml

@@ -905,7 +905,6 @@ Mini Player: 'Міні плэер'
 Comments:
   Comments: 'Каментарыі'
   Click to View Comments: 'Націсніце, каб праглядзець каментарыі'
-  Getting comment replies, please wait: 'Атрымліваюцца адказы на каментарыі, пачакайце'
   There are no more comments for this video: 'Да гэтага відэа больш няма каментарыяў'
   Hide Comments: 'Схаваць каментарыі'
   Top comments: 'Папулярныя каментарыі'

static/locales/bg.yaml

@@ -908,7 +908,6 @@ Mini Player: 'Мини плейър'
 Comments:
   Comments: 'Коментари'
   Click to View Comments: 'Щракнете, за да видите коментарите'
-  Getting comment replies, please wait: 'Получаване на отговори на коментара, моля изчакайте'
   There are no more comments for this video: 'Към това видео няма повече коментари'
   Hide Comments: 'Скриване на коментарите'
   # Context: View 10 Replies, View 1 Reply

static/locales/br.yaml

@@ -984,7 +984,6 @@ Mini Player: 'Lenner bihan'
 Comments:
   Comments: 'Evezhiadennoù'
   Click to View Comments: 'Klikit amañ evit gwelet an evezhiadennoù'
-  Getting comment replies, please wait: 'O kerc''hat respontoù an evezhiadennoù, gortozit mar plij'
   There are no more comments for this video: 'Evezhiadenn ouzhpenn ebet evit ar video-mañ'
   Hide Comments: 'Kuzhat an evezhiadennoù'
   Top comments: 'Evezhiadennoù gwellañ'

static/locales/ckb.yaml

@@ -752,7 +752,6 @@ Mini Player: 'لێدەری گچکە'
 Comments:
   Comments: ''
   Click to View Comments: ''
-  Getting comment replies, please wait: ''
   There are no more comments for this video: ''
   Hide Comments: ''
   Top comments: ''

static/locales/cs.yaml

@@ -917,7 +917,6 @@ Mini Player: 'Mini přehrávač'
 Comments:
   Comments: 'Komentáře'
   Click to View Comments: 'Kliknutím zobrazíte komentáře'
-  Getting comment replies, please wait: 'Načítání odpovědí na komentář, čekejte prosím'
   There are no more comments for this video: 'U tohoto videa nejsou žádné další komentáře'
   Hide Comments: 'Skrýt komentáře'
   Top comments: 'Nejlepší komentáře'

static/locales/cy.yaml

@@ -932,7 +932,6 @@ Mini Player: 'Chwaraewr Bach'
 Comments:
   Comments: 'Sylwadau'
   Click to View Comments: 'Cliciwch i Weld Sylwadau'
-  Getting comment replies, please wait: 'Yn derbyn atebion sylwadau, arhoswch'
   There are no more comments for this video: 'Nid oes mwy o sylwadau ar gyfer y fideo hwn'
   Hide Comments: 'Cuddio Sylwadau'
   Top comments: 'Sylwadau poblogaidd'

static/locales/da.yaml

@@ -883,7 +883,6 @@ Mini Player: 'Miniafspiller'
 Comments:
   Comments: 'Kommentarer'
   Click to View Comments: 'Klik for at vise kommentarer'
-  Getting comment replies, please wait: 'Henter kommentarsvar; vent venligst'
   There are no more comments for this video: 'Der er ikke flere kommentarer til denne video'
   Hide Comments: 'Skjul kommentarer'
   # Context: View 10 Replies, View 1 Reply

static/locales/de-DE.yaml

@@ -868,7 +868,6 @@ Mini Player: Mini-Video-Player
 Comments:
   Comments: Kommentare
   Click to View Comments: Kommentare anzeigen
-  Getting comment replies, please wait: Antworten auf Kommentare werden geladen, bitte warten
   Hide Comments: Kommentare ausblenden
   # Context: View 10 Replies, View 1 Reply
   There are no comments available for this video: Keine Kommentare zu diesem Video vorhanden

static/locales/el.yaml

@@ -905,7 +905,6 @@ Mini Player: 'Μικρή πλατφόρμα αναπαραγωγής'
 Comments:
   Comments: 'Σχόλια'
   Click to View Comments: 'Κάντε κλικ για να δείτε σχόλια'
-  Getting comment replies, please wait: 'Λήψη απαντήσεων σε σχόλια, παρακαλώ περιμένετε'
   Hide Comments: 'Απόκρυψη σχολίων'
   # Context: View 10 Replies, View 1 Reply
   There are no comments available for this video: 'Δεν υπάρχουν διαθέσιμα σχόλια γι αυτό το βίντεο'

static/locales/en-GB.yaml

@@ -914,7 +914,6 @@ Mini Player: 'Mini Player'
 Comments:
   Comments: 'Comments'
   Click to View Comments: 'Click to View Comments'
-  Getting comment replies, please wait: 'Getting comment replies, please wait'
   There are no more comments for this video: 'There are no more comments for this video'
   Hide Comments: 'Hide Comments'
   # Context: View 10 Replies, View 1 Reply

static/locales/en-US.yaml

@@ -1008,13 +1008,13 @@ Mini Player: Mini Player
 Comments:
   Comments: Comments
   Click to View Comments: Click to View Comments
-  Getting comment replies, please wait: Getting comment replies, please wait
   There are no more comments for this video: There are no more comments for this video
   Hide Comments: Hide Comments
   Top comments: Top comments
   Newest first: Newest First
   View {replyCount} replies: View 1 reply | View {replyCount} replies
   Hide {replyCount} replies: Hide 1 reply | Hide {replyCount} replies
+  Loading replies: Loading replies...
   View 1 reply from {channelName}: View 1 reply from {channelName}
   View {replyCount} replies from {channelName} and others: View {replyCount} replies from {channelName} and others
   Show More Replies: Show More Replies

static/locales/eo.yaml

@@ -977,7 +977,6 @@ Mini Player: Ludileto
 Comments:
   Comments: Komentoj
   Click to View Comments: Alklaku por vidi komentojn
-  Getting comment replies, please wait: Venigado de respondoj, bonvolu atendi
   There are no more comments for this video: Ne estas pli da komentoj por tiu ĉi videaĵo
   Hide Comments: Kaŝi komentojn
   Top comments: Plej bonaj komentoj

static/locales/es-MX.yaml

@@ -576,7 +576,6 @@ Mini Player: 'Mini reproductor'
 Comments:
   Comments: 'Comentarios'
   Click to View Comments: 'Presione para Ver Comentarios'
-  Getting comment replies, please wait: 'Recibiendo respuestas de comentarios, por favor espere'
   Hide Comments: 'Esconde comentarios'
   # Context: View 10 Replies, View 1 Reply
   There are no comments available for this video: 'No hay comentarios disponibles para este video'

static/locales/es.yaml

@@ -908,7 +908,6 @@ Mini Player: 'Minirreproductor'
 Comments:
   Comments: 'Comentarios'
   Click to View Comments: 'Pulse para ver comentarios'
-  Getting comment replies, please wait: 'Obteniendo las respuestas. Espere'
   Hide Comments: 'Ocultar comentarios'
   # Context: View 10 Replies, View 1 Reply
   There are no comments available for this video: 'Aún no hay comentarios'

static/locales/et.yaml

@@ -912,7 +912,6 @@ Mini Player: 'Kompaktne vaade'
 Comments:
   Comments: 'Kommentaarid'
   Click to View Comments: 'Kommentaaride vaatamiseks klõpsi'
-  Getting comment replies, please wait: 'Laadin kommentaari vastuseid, palun oota'
   There are no more comments for this video: 'Sellel videol ei ole rohkem kommentaare'
   Hide Comments: 'Peida kommentaarid'
   # Context: View 10 Replies, View 1 Reply