Await results of router.push

ref #721

src/App.vue

@@ -348,7 +348,7 @@ onMounted(async () => {
   // Special handling for the empty app state so that
   // the browser's back button can undo to the clean state.
   if (![...query.keys()].length) {
-    router.push({ path: getPath(url), query: { version } })
+    await router.push({ path: getPath(url), query: { version } })
   } else if (!query.has('version')) {
     // Scale Workshop 1 compatibility
     try {
@@ -378,7 +378,7 @@ onMounted(async () => {
       audio.releaseTime = scaleWorkshopOneData.releaseTime
 
       // Replace query with version 3.
-      router.push({ path: getPath(url), query: { version } })
+      await router.push({ path: getPath(url), query: { version } })
     } catch (error) {
       console.error('Error parsing version 1 URL', error)
     }
@@ -433,7 +433,7 @@ onMounted(async () => {
       scale.computeScale()
 
       // Replace query with version 3.
-      router.push({ path: getPath(url), query: { version } })
+      await router.push({ path: getPath(url), query: { version } })
     } catch (error) {
       console.error(`Error parsing version ${query.get('version')} URL`, error)
     }

src/views/LoadScaleView.vue

@@ -13,14 +13,14 @@ const router = useRouter()
 
 const text = ref('Loading scale...')
 
-onMounted(() => {
+onMounted(async () => {
   const route = useRoute()
-  // Tildes are now wiki or filesystem friendly.
+  // Tildes are not wiki friendly.
   // Versions < 3.0.0-beta.38 used them. This replacing can be removed at the end of the beta cycle.
   const id = (route.params.id as string).replaceAll('~', '_')
 
   if (id === '000000000') {
-    router.push('/')
+    await router.push('/')
     return
   }
 
@@ -32,27 +32,30 @@ onMounted(() => {
   if (!API_URL) {
     alert('API URL not configured')
   } else {
-    fetch(new URL(`scale/${id}.json.gz`, API_URL))
-      .then((res) => {
-        if (res.ok) {
-          text.value = 'Scale loaded. Redirecting...'
-          return res.text()
-        } else if (res.status === 404) {
-          text.value = 'Scale not found.'
-        } else {
-          text.value = 'Internal server error.'
-        }
-      })
-      .then((body) => {
+    try {
+      // XXX: Dashes are not filesystem friendly, but that's a problem for sw-server to solve.
+      // XXX: The api should probably be extensionless now that compression negotation makes sw-server bypassing much harder.
+      const res = await fetch(new URL(`scale/${id}.json.gz`, API_URL))
+      if (res.ok) {
+        text.value = 'Scale loaded. Redirecting...'
+        const body = await res.text()
         if (body) {
           const payload = unpackPayload(body, id)
           audio.initialize()
           audio.fromJSON(payload.audio)
           scale.fromJSON(payload.scale)
-          router.push('/')
+          await router.push('/')
+        } else {
+          text.value = 'Received empty response from the server.'
         }
-      })
-      .catch(() => (text.value = 'Failed to connect to server.'))
+      } else if (res.status === 404) {
+        text.value = 'Scale not found.'
+      } else {
+        text.value = 'Internal server error.'
+      }
+    } catch {
+      text.value = 'Failed to connect to server.'
+    }
   }
 })
 </script>

src/views/MosView.vue

@@ -66,9 +66,9 @@ function mos(mosName: string, mosPattern: string, udpStr: string) {
   updateScale()
 }
 
-function done() {
+async function done() {
   computeScale()
-  router.push('/')
+  await router.push('/')
 }
 
 const EASTER_EGG_SOURCE = `(* Create a fairly even lattice using the generators *)
@@ -77,11 +77,11 @@ parallelotope([3, 5, 7], [1, 1, 1], [0, 0, 1], 1\\6)
 PrimeMapping(1200.000, 1901.955, 2786.316, 3368.819, 4151.323)
 `
 
-function easterEgg() {
+async function easterEgg() {
   scale.name = 'Spoob'
   scale.sourceText = EASTER_EGG_SOURCE
   scale.computeScale()
-  router.push('/')
+  await router.push('/')
 }
 </script>
 

src/views/NotFoundView.vue

@@ -13,11 +13,11 @@ const ritualInProgress = ref(false)
 const router = useRouter()
 const scale = useScaleStore()
 
-function openTheGates(source: string) {
+async function openTheGates(source: string) {
   scale.sourceText = source
   scale.computeScale()
   ritualInProgress.value = false
-  router.push({ path: '/' })
+  await router.push({ path: '/' })
 }
 </script>