add initial loading bar (fix #4)

app/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "fetch-progress": "^1.3.0",
     "normalize.css": "^8.0.1",
     "panzoom": "^9.4.1",
     "stats.js": "^0.17.0",

app/src/components/SVGContent.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="svg-content">
+    <div :class="['loading', {loaded: loadedPercent == 100}]">
+      <div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
+    </div>
     <div class="content" ref="root">
       <div class="video-scrolls">
         <VideoScroll v-for="scroll in scrolls" :definition="scroll"/>
@@ -33,6 +36,7 @@ import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/Vi
 import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
 import Stats from "stats.js";
 import {rotate} from "@/utils";
+import fetchProgress from "fetch-progress";
 
 
 export interface BoundingBox {
@@ -67,6 +71,7 @@ export default defineComponent({
   },
   setup(props, {emit}) {
     const root = ref<HTMLDivElement | null>(null);
+    const loadedPercent = ref(0);
     const panzoom = ref<null | PanZoom>(null);
     const anchors = ref<SVGRectElement[]>([]);
     const scrolls = ref<VideoScrollDef[]>([]);
@@ -91,10 +96,16 @@ export default defineComponent({
 
       // Fetch & load SVG
       console.info(`[SVG] Fetching "${props.url}..."`);
-      const fetchResult = await fetch(props.url);
-      console.debug("[SVG] Fetched, parsing...");
+      const fetchResult = await fetch(props.url).then(
+          fetchProgress({
+            onProgress(progress) {
+              loadedPercent.value = (progress as any).percentage;
+            },
+          })
+      );
       const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
-      console.debug("[SVG] Parsed.");
+      console.debug("[SVG] Loaded.");
+      loadedPercent.value = 100;
       const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
 
       // Set document background
@@ -304,6 +315,7 @@ export default defineComponent({
 
     return {
       root,
+      loadedPercent,
       panzoom,
       anchors,
       panToAnchor,
@@ -433,6 +445,28 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   visibility: hidden;
 }
 
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: black;
+  transition: opacity 0.5s;
+  opacity: 1;
+}
+
+.loaded {
+  opacity: 0 !important;
+}
+
+.loading-bar {
+  height: 6px;
+  background: white;
+  margin: 25% auto;
+  transition: width 0.2s;
+}
+
 .devpanel {
   position: fixed;
   top: 0;