From 1f192d99fcad63232141cae027b5be948268dbcd Mon Sep 17 00:00:00 2001
From: Jona <8698248+jonamil@users.noreply.github.com>
Date: Mon, 3 Jun 2024 20:41:02 +0200
Subject: [PATCH] Rename LoadingItem to StatusItem

---
 .../{LoadingItem.vue => StatusItem.vue}           |  0
 src/components/TheCommentsView.vue                | 15 ++++++++-------
 src/components/ThePostsView.vue                   |  8 ++++----
 3 files changed, 12 insertions(+), 11 deletions(-)
 rename src/components/{LoadingItem.vue => StatusItem.vue} (100%)

diff --git a/src/components/LoadingItem.vue b/src/components/StatusItem.vue
similarity index 100%
rename from src/components/LoadingItem.vue
rename to src/components/StatusItem.vue
diff --git a/src/components/TheCommentsView.vue b/src/components/TheCommentsView.vue
index 70a3239..958b223 100644
--- a/src/components/TheCommentsView.vue
+++ b/src/components/TheCommentsView.vue
@@ -52,8 +52,8 @@
         />
       </Suspense>
     </template>
-    <LoadingItem
-      ref="loadingItemInstance"
+    <StatusItem
+      ref="statusItemInstance"
       v-show="!hasComments || !someThreadInstancesVisible || !allThreadInstancesVisible"
       :full-height="!hasDescription && (!hasComments || !someThreadInstancesVisible)"
       :message="!hasComments ? 'So far, no comments have been left on this story.' : undefined"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import type { ComponentPublicInstance } from 'vue';
 import { useInfiniteScroll } from '@vueuse/core';
 import type { HackerNewsItem } from '@/types';
@@ -70,7 +70,7 @@ import { apiItemUrl } from '@/utils';
 import BaseButton from '@/components/BaseButton.vue';
 import PageColumnBody from '@/components/PageColumnBody.vue';
 import CommentItem from '@/components/CommentItem.vue';
-import LoadingItem from '@/components/LoadingItem.vue';
+import StatusItem from '@/components/StatusItem.vue';
 import { useContentStore } from '@/stores/ContentStore';
 
 const content = useContentStore();
@@ -124,13 +124,14 @@ async function fetchThreadItems() {
   loadThreadGroup();
 }
 
-// if this is true, it prevents infinite scrolling callbacks from lading multiple thread groups at once
+// if this is true, it prevents infinite scrolling callbacks from loading multiple thread groups at once
 const isLoadingThreadGroup = ref(false);
 
 // push the next slice of threadItems as a new thread group
 function loadThreadGroup() {
   if (isLoadingThreadGroup.value) return;
 
+  // when the Suspense component surrounding the thread group's items resolves, this is set back to false
   isLoadingThreadGroup.value = true;
 
   threadGroups.value.push(
@@ -205,7 +206,7 @@ onMounted(() => {
   );
 });
 
-const loadingItemInstance = ref<ComponentPublicInstance | null>(null);
+const statusItemInstance = ref<ComponentPublicInstance | null>(null);
 
 function scrollThreadIntoView(index: number) {
   if (index < 0 || index >= threadItemCount.value) return;
@@ -214,7 +215,7 @@ function scrollThreadIntoView(index: number) {
   // (triggering loadThreadGroup)
   const element =
     index >= threadInstanceCount.value
-      ? loadingItemInstance.value?.$el
+      ? statusItemInstance.value?.$el
       : threadInstances.value[index].$el;
 
   element.scrollIntoView({
diff --git a/src/components/ThePostsView.vue b/src/components/ThePostsView.vue
index 7b214e5..2b3f48d 100644
--- a/src/components/ThePostsView.vue
+++ b/src/components/ThePostsView.vue
@@ -11,9 +11,9 @@
       :active="postItem.id === content.currentPostItem?.id"
       @click="content.setCurrentPostItem(postItem)"
     />
-    <LoadingItem
+    <StatusItem
       :full-height="!content.currentCategoryHasSomePostItems"
-      :message="loadingMessage"
+      :message="statusMessage"
     />
   </PageColumnBody>
 </template>
@@ -23,7 +23,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useInfiniteScroll } from '@vueuse/core';
 import PageColumnBody from '@/components/PageColumnBody.vue';
 import PostItem from '@/components/PostItem.vue';
-import LoadingItem from '@/components/LoadingItem.vue';
+import StatusItem from '@/components/StatusItem.vue';
 import { useContentStore } from '@/stores/ContentStore';
 
 const content = useContentStore();
@@ -42,7 +42,7 @@ onMounted(() => {
   );
 });
 
-const loadingMessage = computed(() => {
+const statusMessage = computed(() => {
   if (content.currentCategoryHasAllPostItems)
     return `You have browsed all “${content.currentCategoryName.replace(' ', '&nbsp;')}” entries. Refresh the list to view newer posts.`;
   else if (content.currentCategoryPostIds?.error)