added progress bar

index.html

···
       </p>
 
       <p>
-        <input type="submit" value="Start scan">
+        <input type="submit" value="Start scan"> <progress></progress>
       </p>
     </form>
 

like_stats_page.js

···
 
     this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
     this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
+    this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement);
 
     this.receivedTable = $(this.pageElement.querySelector('.received-likes'));
     this.givenTable = $(this.pageElement.querySelector('.given-likes'));
···
 
     let requestedDays = this.selectedDaysRange();
 
+    this.resetProgress();
+    this.progressBar.style.display = 'inline';
+
     let startTime = new Date().getTime();
     this.scanStartTime = startTime;
+
+    this.receivedTable.style.display = 'none';
+    this.givenTable.style.display = 'none';
 
     let fetchGivenLikes = this.fetchGivenLikes(requestedDays);
 
···
 
     this.receivedTable.style.display = 'table';
     this.givenTable.style.display = 'table';
+
+    this.submitButton.value = 'Start scan';
+    this.progressBar.style.display = 'none';
+    this.scanStartTime = undefined;
   }
 
   async fetchGivenLikes(requestedDays) {
···
       limit: 100
     }, {
       field: 'records',
-      breakWhen: (x) => Date.parse(x['value']['createdAt']) < now - 86400 * requestedDays * 1000
+      breakWhen: (x) => Date.parse(x['value']['createdAt']) < now - 86400 * requestedDays * 1000,
+      onPageLoad: (data) => {
+        if (data.length == 0) { return }
+
+        let last = data[data.length - 1];
+        let lastDate = Date.parse(last.value.createdAt);
+
+        let daysBack = (this.scanStartTime - lastDate) / 86400 / 1000;
+        this.updateProgress({ likeRecords: Math.min(1.0, daysBack / requestedDays) });
+      }
     });
   }
 
   async fetchReceivedLikes(requestedDays) {
-    let myPosts = await this.appView.loadUserTimeline(accountAPI.user.did, requestedDays);
+    let myPosts = await this.appView.loadUserTimeline(accountAPI.user.did, requestedDays, {
+      onPageLoad: (data) => {
+        if (data.length == 0) { return }
+
+        let last = data[data.length - 1];
+        let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
+        let lastDate = Date.parse(lastTimestamp);
+
+        let daysBack = (this.scanStartTime - lastDate) / 86400 / 1000;
+        this.updateProgress({ posts: Math.min(1.0, daysBack / requestedDays) });
+      }
+    });
+
     let likedPosts = myPosts.filter(x => !x['reason'] && x['post']['likeCount'] > 0);
 
     let results = [];
 
     for (let i = 0; i < likedPosts.length; i += 10) {
       let batch = likedPosts.slice(i, i + 10);
+      this.updateProgress({ postLikes: i / likedPosts.length });
 
       let fetchBatch = batch.map(x => {
         return this.appView.fetchAll('app.bsky.feed.getLikes', { uri: x['post']['uri'], limit: 100 }, {
···
       let batchResults = await Promise.all(fetchBatch);
       results = results.concat(batchResults);
     }
+
+    this.updateProgress({ postLikes: 1.0 });
 
     return results.flat();
   }
···
     };
   }
 
+  resetProgress() {
+    this.progressBar.value = 0;
+    this.progressPosts = 0;
+    this.progressLikeRecords = 0;
+    this.progressPostLikes = 0;
+  }
+
+  updateProgress(data) {
+    if (data.posts) {
+      this.progressPosts = data.posts;
+    }
+
+    if (data.likeRecords) {
+      this.progressLikeRecords = data.likeRecords;
+    }
+
+    if (data.postLikes) {
+      this.progressPostLikes = data.postLikes;
+    }
+
+    let totalProgress = (
+      0.1 * this.progressPosts +
+      0.65 * this.progressLikeRecords +
+      0.25 * this.progressPostLikes
+    );
+
+    this.progressBar.value = totalProgress;
+  }
+
   sortResults(a, b) {
     if (a[1] < b[1]) {
       return 1;
···
 
   stopScan() {
     this.submitButton.value = 'Start scan';
+    this.progressBar.style.display = 'none';
     this.scanStartTime = undefined;
   }
 }

style.css

···
   margin-top: 25px;
 }
 
-#like_stats_page {
-  display: none;
-}
-
-#like_stats_page input[type="range"] {
-  width: 250px;
-  vertical-align: middle;
-}
-
-#like_stats_page .scan-result {
-  border: 1px solid #333;
-  border-collapse: collapse;
-  display: none;
-  float: left;
-  margin-right: 100px;
-}
-
-#like_stats_page .scan-result td, #like_stats_page .scan-result th {
-  border: 1px solid #333;
-  padding: 5px 8px;
-}
-
-#like_stats_page .scan-result th {
-  text-align: center;
-  background-color: hsl(207, 100%, 86%);
-  padding: 7px 10px;
-}
-
 #posting_stats_page {
   display: none;
 }
···
 
 #posting_stats_page .scan-result td.percent {
   min-width: 70px;
+}
+
+#like_stats_page {
+  display: none;
+}
+
+#like_stats_page input[type="range"] {
+  width: 250px;
+  vertical-align: middle;
+}
+
+#like_stats_page progress {
+  width: 300px;
+  margin-left: 10px;
+  vertical-align: middle;
+  display: none;
+}
+
+#like_stats_page .scan-result {
+  border: 1px solid #333;
+  border-collapse: collapse;
+  display: none;
+  float: left;
+  margin-right: 100px;
+}
+
+#like_stats_page .scan-result td, #like_stats_page .scan-result th {
+  border: 1px solid #333;
+  padding: 5px 8px;
+}
+
+#like_stats_page .scan-result th {
+  text-align: center;
+  background-color: hsl(207, 100%, 86%);
+  padding: 7px 10px;
 }
 
 @media (prefers-color-scheme: dark) {