Wait for data root before loading filesystem (#42)

* Upgrade webnative to 0.34.1

* Wait for data root before loading filesystem

* Add loading filesystem modal

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "clipboard-copy": "^4.0.1",
         "qrcode-svg": "^1.1.0",
-        "webnative": "0.34.0"
+        "webnative": "0.34.1"
       },
       "devDependencies": {
         "@sveltejs/adapter-static": "1.0.0-next.36",
@@ -5501,9 +5501,9 @@
       }
     },
     "node_modules/webnative": {
-      "version": "0.34.0",
+      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.1.tgz",
-      "integrity": "sha512-BS5pgHx9+sIzZ3NYA9Q76QQOctHFuyZ9p/LC4U4+gWTjycj0efWl0Z2jlsaUyGfqBkFLReyDeTb3ldHkD2PgbA==",
+      "integrity": "sha512-FCY00dBUUHWEdabkLV3INTxnkNVlRQfmiNfe4M+Pg85rppLTHP0WU/MAbPHan5NMdH2j09KPeFmxLD2qbqszHQ==",
       "dependencies": {
         "@ipld/dag-cbor": "^7.0.2",
         "@ipld/dag-pb": "^2.1.17",
@@ -9506,9 +9506,9 @@
       "peer": true
     },
     "webnative": {
-      "version": "0.34.0",
+      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.34.1.tgz",
-      "integrity": "sha512-BS5pgHx9+sIzZ3NYA9Q76QQOctHFuyZ9p/LC4U4+gWTjycj0efWl0Z2jlsaUyGfqBkFLReyDeTb3ldHkD2PgbA==",
+      "integrity": "sha512-FCY00dBUUHWEdabkLV3INTxnkNVlRQfmiNfe4M+Pg85rppLTHP0WU/MAbPHan5NMdH2j09KPeFmxLD2qbqszHQ==",
       "requires": {
         "@ipld/dag-cbor": "^7.0.2",
         "@ipld/dag-pb": "^2.1.17",

package.json

@@ -53,6 +53,6 @@
   "dependencies": {
     "clipboard-copy": "^4.0.1",
     "qrcode-svg": "^1.1.0",
-    "webnative": "0.34.0"
+    "webnative": "0.34.1"
   }
 }

src/components/auth/link/LinkDevice.svelte

@@ -2,10 +2,11 @@
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
 
-  import { appName } from '$lib/app-name'
   import { createAccountLinkingConsumer } from '$lib/auth/linking'
   import { loadAccount } from '$lib/common/webnative'
 
+  let loadingFilesystem = false
+
   let displayPin: string = ''
   let url = $page.url
   const username = url.searchParams.get('username')
@@ -23,6 +24,8 @@
 
     accountLinkingConsumer.on('link', async ({ approved, username }) => {
       if (approved) {
+        loadingFilesystem = true
+
         await loadAccount(username)
         goto('/')
         // Send up a toast on '/'
@@ -34,35 +37,54 @@
 </script>
 
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
-<div class="modal">
+{#if loadingFilesystem}
-  <div
+  <div class="modal">
-    class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+    <div
-  >
+      class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center dark:bg-slate-900 dark:border-slate-600 dark:border "
-    <div class="grid grid-flow-row auto-rows-max gap-7">
+    >
-      <h3 class="text-xl font-serif">Connection Requested</h3>
+      <p class="text-slate-500 dark:text-slate-50">
-      <div class="grid grid-flow-row auto-rows-max gap-4 justify-items-center">
+        <span
-        {#if displayPin}
+          class="rounded-lg border-t-2 border-l-2 border-slate-500 dark:border-slate-50 w-4 h-4 inline-block animate-spin mr-1"
-          <span
+        />
-            class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
+        Loading file system...
-          >
+      </p>
-            {displayPin}
+    </div>
-          </span>
+  </div>
-        {/if}
+{:else}
-        <span class="text-md">Enter this code on your connected device.</span>
+  <div class="modal">
+    <div
+      class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
+    >
+      <div class="grid grid-flow-row auto-rows-max gap-7">
+        <h3 class="text-xl font-serif">Connection Requested</h3>
         <div
-          class="grid grid-flow-col auto-cols-max gap-4 justify-center items-center text-slate-500"
+          class="grid grid-flow-row auto-rows-max gap-4 justify-items-center"
         >
-          <span
+          {#if displayPin}
-            class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block animate-spin"
+            <span
-          />
+              class="btn btn-info btn-lg rounded-full text-2xl tracking-widest w-3/4 cursor-default"
-          Waiting for a response...
+            >
+              {displayPin}
+            </span>
+          {/if}
+          <span class="text-md">Enter this code on your connected device.</span>
+          <div
+            class="grid grid-flow-col auto-cols-max gap-4 justify-center items-center text-slate-500"
+          >
+            <span
+              class="rounded-lg border-t-2 border-l-2 border-slate-600 dark:border-slate-50 w-4 h-4 block animate-spin"
+            />
+            Waiting for a response...
+          </div>
+        </div>
+        <div>
+          <button
+            class="btn btn-primary btn-outline text-base font-normal mt-4"
+          >
+            Cancel Request
+          </button>
         </div>
-      </div>
-      <div>
-        <button class="btn btn-primary btn-outline text-base font-normal mt-4">
-          Cancel Request
-        </button>
       </div>
     </div>
   </div>
-</div>
+{/if}

src/lib/common/webnative.ts

@@ -106,6 +106,8 @@ export const register = async (username: string): Promise<boolean> => {
 }
 
 export const loadAccount = async (username: string): Promise<void> => {
+  await checkDataRoot(username)
+
   const fs = await webnative.loadRootFileSystem()
   filesystemStore.set(fs)
 
@@ -115,3 +117,28 @@ export const loadAccount = async (username: string): Promise<void> => {
     authed: true
   }))
 }
+
+const checkDataRoot = async (username: string): Promise<void> => {
+  let dataRoot = await webnative.dataRoot.lookup(username)
+
+  if (dataRoot) return
+
+  return new Promise((resolve) => {
+    const maxRetries = 20
+    let attempt = 0
+
+    const dataRootInterval = setInterval(async () => {
+      console.warn('Could not fetch filesystem data root. Retrying.')
+
+      dataRoot = await webnative.dataRoot.lookup(username)
+
+      if (!dataRoot && attempt < maxRetries) {
+        attempt++
+        return
+      }
+
+      clearInterval(dataRootInterval)
+      resolve()
+    }, 500)
+  })
+}