vue app init: simplified logic in order to facilitate loader/progress UI and loader simulator to test various scenarios

update:
1. use ONE method to set current replay/snapshot (do NOT use a second way: e.g. config.initialView to set initial replay! BAD!)
2. use ONE method to set app data AND current snapshot (regardless of whether it's from a URL re-load, from an iframe bubble-URL change load)
3. make init app method deal ONLY with app init and move data-setter into another (see 2.)
4. on VUE APP INIT: add specific data-set method

pywb/vueui/src/App.vue

@@ -67,7 +67,7 @@ export default {
       currentPeriod: null,
       currentSnapshot: null,
       msgs: [],
-      showFullView: false,
+      showFullView: true,
       showTimelineView: true,
       maxTimelineZoomLevel: PywbPeriod.Type.day,
       config: {
@@ -79,7 +79,6 @@ export default {
   },
   components: {Timeline, TimelineBreadcrumbs, CalendarYear},
   mounted: function() {
-    this.init();
   },
   computed: {
     sessionStorageUrlKey() {
@@ -133,21 +132,15 @@ export default {
         window.location.href = this.config.prefix + "*/" + newUrl;
       }
     },
-    init() {
+    setData(/** @type {PywbData} data */ data) {
-      this.config.url = this.config.initialView.url;
+      // mark app as DONE loading (i.e. NOT loading)
-      if (this.config.initialView.title) {
+      this.isLoading = false;
-        this.config.title = this.config.initialView.title;
+
-      }
+      // data-set will usually happen at App INIT (from parent caller)
-      if (this.config.initialView.timestamp === undefined) {
+      this.$set(this, "snapshots", data.snapshots);
-        this.showFullView = true;
+      this.$set(this, "currentPeriod", data.timeline);
-        this.showTimelineView = true;
+
-      } else {
+      // get last-saved current period from previous page/app refresh (if there was such)
-        this.showFullView = false;
-        this.showTimelineView = true;
-        if (this.currentPeriod.children.length) {
-          this.setSnapshot(this.config.initialView);
-        }
-      }
       if (window.sessionStorage) {
         const currentPeriodId = window.sessionStorage.getItem(this.sessionStorageUrlKey);
         if (currentPeriodId) {
@@ -159,10 +152,16 @@ export default {
       }
     },
     setSnapshot(view) {
-      // convert to snapshot objec to support proper rendering of time/date
+      // turn off calendar (aka full) view
+      this.showFullView = false;
+
+      // convert to snapshot object to support proper rendering of time/date
       const snapshot = new PywbSnapshot(view, 0);
+
+      // set config current URL and title
       this.config.url = view.url;
       this.config.title = view.title;
+
       this.gotoSnapshot(snapshot);
     }
   }

pywb/vueui/src/index.js

@@ -43,23 +43,17 @@ class CDXLoader {
       throw new Error("No query URL specified");
     }
 
-    this.opts.initialView = {url, timestamp};
+    const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
-
-    this.opts.logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
 
+    this.app = this.initApp({logoImg, url});
     this.loadCDX(queryURL).then((cdxList) => {
-      this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
+      this.setAppData(cdxList, timestamp ? {url, timestamp}:null);
     });
   }
 
-  initApp(data, config = {}, loadCallback = null) {
+  initApp(config = {}) {
     const app = new Vue(appData);
 
-    const pywbData = new PywbData(data);
-
-    app.$set(app, "snapshots", pywbData.snapshots);
-    app.$set(app, "currentPeriod", pywbData.timeline);
-
     app.$set(app, "config", {...app.config, ...config, prefix: this.prefix});
 
     app.$mount("#app");
@@ -75,9 +69,8 @@ class CDXLoader {
     //     };
     //   }
     // });
-    if (loadCallback) {
+
-      app.$on("show-snapshot", loadCallback);
+    app.$on("show-snapshot", this.loadSnapshot.bind(this));
-    }
 
     return app;
   }
@@ -90,13 +83,15 @@ class CDXLoader {
 
     const cdxList = await this.loadCDX(queryURL);
 
-    const pywbData = new PywbData(cdxList);
+    this.setAppData(cdxList, {url, timestamp});
+  }
 
-    const app = this.app;
+  setAppData(cdxList, snapshot=null) {
-    app.$set(app, "snapshots", pywbData.snapshots);
+    this.app.setData(new PywbData(cdxList));
-    app.$set(app, "currentPeriod", pywbData.timeline);
 
-    app.setSnapshot({url, timestamp});
+    if (snapshot) {
+      this.app.setSnapshot(snapshot);
+    }
   }
 
   async loadCDX(queryURL) {