Fix comment section auto-scroll glitch on initial load

src/renderer/components/CommentSection/CommentSection.vue

@@ -4,6 +4,7 @@
   >
     <h3
       v-if="commentData.length > 0 && !isLoading && showComments"
+      ref="commentsTitle"
       class="commentsTitle"
     >
       {{ $t("Comments.Comments") }}
@@ -319,7 +320,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtCard from '../ft-card/ft-card.vue'
@@ -372,6 +373,7 @@ const props = defineProps({
 })
 
 const isLoading = ref(false)
+const commentsTitle = useTemplateRef('commentsTitle')
 const showComments = ref(false)
 const nextPageToken = shallowRef(null)
 
@@ -615,6 +617,12 @@ async function getCommentDataLocal(more = false) {
     nextPageToken.value = comments.has_continuation ? comments : null
     isLoading.value = false
     showComments.value = true
+
+    if (!more) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      })
+    }
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -716,10 +724,17 @@ async function getCommentDataInvidious() {
       return comment
     })
 
+    const isInitialLoad = commentData.value.length === 0
     commentData.value = commentData.value.concat(comments)
     nextPageToken.value = response.continuation
     isLoading.value = false
     showComments.value = true
+
+    if (isInitialLoad) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      })
+    }
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -799,10 +814,17 @@ function getPostCommentsInvidious() {
       return comment
     })
 
+    const isInitialLoad = commentData.value.length === 0
     commentData.value = commentData.value.concat(comments)
     nextPageToken.value = response?.continuation ?? continuation
     isLoading.value = false
     showComments.value = true
+
+    if (isInitialLoad) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      })
+    }
   }).catch((err) => {
     console.error(err)
     const errorMessage = t('Invidious API Error (Click to copy)')