new: fetching new item will only begin after the page is loaded

static/index.js

@@ -10,8 +10,9 @@ let currentItem = -1
 
 // for newest listing
 let newMode = params.get('order') == 'new'
-let endItem // for the later new items
+let endItem // for the later new items. new items will be fetch until this item
 let maxItem
+let new_loader_id
 
 // for the api requests
 let loadedItems = 0
@@ -59,6 +60,11 @@ function loadItems() {
 
         if (!shouldLoad()) {
             loader_id = clearInterval(loader_id)
+
+            if (newMode && !new_loader_id) {
+                new_loader_id = setInterval(loadFresh, 5e3)
+            }
+
             return
         }
 
@@ -91,17 +97,17 @@ function getItem(id) {
 function makeItemListing(itemObj) {
 
     if (itemObj === null || itemObj === undefined) {
-        console.log(`[makeItemListing] null or undefined object`)
         clearInterval(loader_id)
-        return
+        throw new Error(`[makeItemListing] null or undefined object`)
     }
 
     if (itemObj.deleted || itemObj.dead || itemObj.title == "[deleted]") {
-        console.log(`[makeItemListing] bad item: ${itemObj.id}`)
+        console.debug(`[makeItemListing] Deleted item: ${itemObj.id}`)
         return
     }
 
     if (itemObj.type == itemType.comment || itemObj.type == itemType.pollopt) {
+        console.debug(`[makeItemListing] Comment or Poll Option item: ${itemObj.id}`)
         return
     }
 
@@ -269,16 +275,16 @@ async function loadPollOpt(opts) {
         }
 
         const element_string =`
-          <div class="columns">
-            <div class="column is-narrow is-center">
-              <span class="icon is-small is-left" style="height: 100%">
-                <i class="fas fa-arrow-up">&nbsp;${item.score}</i>
-              </span>
-            </div>
-            <div class="column is-narrow">
-              <h4 class="title is-4">${item.text}</h4>
-            </div>
+        <div class="columns">
+          <div class="column is-narrow is-center">
+            <span class="icon is-small is-left" style="height: 100%">
+              <i class="fas fa-arrow-up">&nbsp;${item.score}</i>
+            </span>
           </div>
+          <div class="column is-narrow">
+            <h4 class="title is-4">${item.text}</h4>
+          </div>
+        </div>
         `
 
         const element = document.createElement('div')
@@ -317,10 +323,11 @@ const sleep = (ms) => new Promise(resolve => {
 async function loadCommnets(ids, target) {
 
     const message = (msg) => `
-      <div class="card-content">
-        <div class="content">
+    <div class="card-content">
+      <div class="content">
         ${msg}
       </div>
+    </div>
     `
 
     for (const id of ids) {
@@ -416,7 +423,7 @@ async function notify(count) {
         return
     }
 
-    new Notification("Clone Wars", { body: "new Posts"})
+    new Notification("Clone Wars", { body: `${count} new Posts`})
 }
 
 async function loadFresh() {
@@ -435,28 +442,24 @@ async function loadFresh() {
         return
     }
 
-    console.log(`[loadFresh] new items ${newMax - endItem}`)
-    let count = 0
+    console.log(`[loadFresh] New Items ${newMax - endItem}`)
+    const count = pageItemBox.childElementCount
 
-    let intervalId = setInterval(async () => {
+    let intervalId = setInterval(() => {
 
         if (newMax <= endItem) {
             endItem = newEnd
-            notify(count)
-            return clearInterval(intervalId)
+            notify(pageItemBox.childElementCount - count)
+            clearInterval(intervalId)
+            return
         }
 
         try {
-            let item = await getItem(newMax--)
-
-            if (item) {
-                const type = item.type
-
-                if (type == itemType.job || type == itemType.poll || type == itemType.story) {
+            getItem(newMax--).then(item => {
+                if (item) {
                     makeItemListing(item)
-                    count++
                 }
-            }
+            })
 
         } catch (e) {
             console.log(`[loadFresh] got error ${e}`)
@@ -467,11 +470,6 @@ async function loadFresh() {
 
 }
 
-if (newMode) {
-    setTimeout(setInterval, 5e3, loadFresh, 5e3)
-}
-
-
 if (!isQuery) {
     setInterval(() => Array.from(pageItemBox.getElementsByTagName('a')).map(c => {