only show reached the bottom when container length is less than distance

client/package.json

@@ -14,18 +14,18 @@
   },
   "dependencies": {
     "@dvuckovic/vue3-bootstrap-icons": "^2.0.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.3",
     "bootstrap": "^5.3.3",
     "bootswatch": "^5.3.3",
     "idb-keyval": "^6.2.1",
     "moment": "^2.30.1",
     "register-service-worker": "^1.7.2",
-    "vue": "^3.4.34",
+    "vue": "^3.4.35",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.1",
-    "@vue/compiler-sfc": "^3.4.34",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/compiler-sfc": "^3.4.35",
     "sass": "^1.77.8",
     "vite": "^5.3.5",
     "vite-plugin-pwa": "^0.20.1"

client/src/components/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <InfiniteScroll :articles="articles" :container="container" :pool="pool" :currentSelection="this.store.currentSelection.status" :remainingItems="remainingItems" :fetchCount="fetchCount" :hasLoadedContent="hasLoadedContent" :isFlushed="isFlushed">
+  <InfiniteScroll :articles="articles" :container="container" :pool="pool" :currentSelection="this.store.currentSelection.status" :remainingItems="remainingItems" :fetchCount="fetchCount" :hasLoadedContent="hasLoadedContent" :isFlushed="isFlushed" :distance="distance">
   </InfiniteScroll>
 </template>
 

client/src/components/InfiniteScroll.vue

@@ -6,7 +6,7 @@
     <div id="no-more" v-if="hasLoadedContent">
       <p v-if="container.length == 0" id="no-results">No posts found!</p>
       <p v-if="currentSelection != 'unread' && container.length != 0 && remainingItems < fetchCount">You reached the bottom!</p>
-      <p v-if="currentSelection == 'unread' && container.length != 0 && isFlushed === false" v-on:click="flushPool()">You reached the bottom! <br>Click here to mark all remaining items as read!</p>
+      <p v-if="currentSelection == 'unread' && container.length != 0 && isFlushed === false && distance > container.length" v-on:click="flushPool()">You reached the bottom! <br>Click here to mark all remaining items as read!</p>
       <p v-if="currentSelection == 'unread' && isFlushed === true && container.length > 0">All items are marked as read.</p>
     </div>
     <div id="no-more" v-else>
@@ -54,6 +54,10 @@ export default {
     isFlushed: {
       type: Boolean,
       required: true
+    },
+    distance: {
+      type: Number,
+      required: true
     }
   },
   methods: {

server/package.json

@@ -21,7 +21,7 @@
     "nodemon": "^3.1.4"
   },
   "dependencies": {
-    "@rowanmanning/feed-parser": "^1.0.0",
+    "@rowanmanning/feed-parser": "^1.0.1",
     "body-parser": "^1.20.2",
     "cheerio": "^1.0.0-rc.12",
     "dotenv": "^16.4.5",