Move to internal currentDate state and update hash fragment on idle

Updating the hash fragment causes a small delay while scrolling.
=> Update only after user finished scrolling.
Uses requestIdleCallback
which is not ready for prime time in Safari. But should work elsewhere.

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -37,7 +37,7 @@
       <coursebook-loader />
 
       <date-select-footer
-        :value="$route.hash.substring(1)"
+        :value="currentDate"
         @input="gotoDate"
         @prev="gotoPrev"
         @next="gotoNext"
@@ -114,6 +114,8 @@ export default {
       incomplete: false,
       ready: false,
       initDate: false,
+      currentDate: "",
+      hashUpdater: false,
     };
   },
   computed: {
@@ -171,12 +173,13 @@ export default {
     resetDate() {
       // Assure current date
       console.log('Resetting date range', this.$route.hash);
-      if (!this.$route.hash) {
+      this.currentDate = this.$route.hash?.substring(1);
+      if (!this.currentDate) {
         console.log('Set default date');
         this.setDate(DateTime.now().toISODate());
       } 
 
-      const date = DateTime.fromISO(this.$route.hash.substring(1));
+      const date = DateTime.fromISO(this.currentDate);
       this.initDate = date;
       this.dateStart = date.minus({ days: 3 }).toISODate();
       this.dateEnd = date.plus({ days: 4 }).toISODate();
@@ -224,8 +227,14 @@ export default {
       });
     },
     setDate(date) {
-      if (!(this.$route.hash.substring(1) === date)) {
-        this.$router.replace({ hash: date })
+      this.currentDate = date;
+      if (!this.hashUpdater) {
+        this.hashUpdater = window.requestIdleCallback(() => {
+          if (!(this.$route.hash.substring(1) === this.currentDate)) {
+            this.$router.replace({ hash: this.currentDate })
+          }
+          this.hashUpdater = false;
+        });
       }
     },
     fixScrollPos(height, top) {
@@ -294,20 +303,18 @@ export default {
     },
     // TODO: Disable navigation while loading!
     gotoPrev() {
-      const current = this.$route.hash.substring(1);
       const pref = this.$refs.days
             .map((day) => day.date.toISODate())
             .sort()
             .reverse()
-            .find((date) => date < current);
+            .find((date) => date < this.currentDate);
       this.gotoDate(pref);
     },
     gotoNext() {
-      const current = this.$route.hash.substring(1);
       const next = this.$refs.days
             .map((day) => day.date.toISODate())
             .sort()
-            .find((date) => date > current);
+            .find((date) => date > this.currentDate);
       this.gotoDate(next);
     },
   },