add reader progress

index.html

@@ -63,6 +63,8 @@
               <label for="file-input" class="btn btn-primary w-full"><i icon="file-up"></i> Select file</label>
               <input @change="onFileChange" id="file-input" type="file" class="hidden" />
             </div>
+            <progress v-if="server.reading || serverIsReady" :value="server.readingProgress" max="100" class="progress"
+              :class="server.readingProgress >= 100 ? 'progress-success' : 'progress-primary'"></progress>
             <div ref="qrcode" id="qrcode" :class="serverIsReady ? '' : 'hidden'" class="w-full max-w-64 mx-auto mt-2">
             </div>
             <div v-if="serverIsReady" @click="onShare" class="mt-2 w-full btn btn-primary">

main.js

@@ -202,6 +202,7 @@ const app = createApp({
         clients: [],
         url: null,
         reading: false,
+        readingProgress: 0,
         data: null,
         copied: false,
       },
@@ -722,8 +723,15 @@ const app = createApp({
     onReaderLoad(reader) {
       this.server.data = reader.result;
       this.server.reading = false;
+      this.server.readingProgress = 100;
+    },
+    onReaderProgress(event) {
+      if (event.lengthComputable) {
+        this.server.readingProgress = (100 * event.loaded) / event.total;
+      }
     },
     onReaderError() {
+      this.server.readingProgress = 0;
       this.error = "Error reading file";
     },
     // UI EVENTS
@@ -736,6 +744,7 @@ const app = createApp({
         const reader = new FileReader();
         reader.onload = () => this.onReaderLoad(reader);
         reader.onerror = this.onReaderError;
+        reader.onprogress = this.onReaderProgress;
         reader.readAsArrayBuffer(file);
       }
     },