update image preview to blank when scanning

src/components/page-preview/ImagePreview.vue

@@ -1,22 +1,31 @@
 <template>
   <n-image :src="imageURL" v-if="imageURL" style="display: block" />
-  <div v-else class="image-placeholder">
+  <div v-else class="image-placeholder" :style="skeletonStyle">
     <n-skeleton width="100%" height="100%" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { NImage, NSkeleton } from "naive-ui";
-import { toRef } from "vue";
+import { toRef, computed } from "vue";
 import { useObjectUrl } from "@vueuse/core";
 
 const props = defineProps<{
   image?: Blob;
+  width?: number;
+  height?: number;
 }>();
 
 const image = toRef(props, "image");
 
 const imageURL = useObjectUrl(image);
+
+const skeletonStyle = computed(() => {
+  if (!props.width || !props.height) return {};
+  return {
+    "aspect-ratio": `${props.width} / ${props.height}`,
+  };
+});
 </script>
 
 <style scoped>

src/components/page-preview/PreviewCompare.vue

@@ -5,7 +5,11 @@
         <ImagePreview :image="image?.blob" />
       </template>
       <template #scan>
-        <ImagePreview :image="scanImage?.blob" />
+        <ImagePreview
+          :image="scanning ? undefined : scanImage?.blob"
+          :height="image?.height"
+          :width="image?.width"
+        />
       </template>
     </SideBySidePreview>
     <PreviewPagination
@@ -25,13 +29,16 @@ import PreviewPagination from "./PreviewPagination.vue";
 import { NSpace } from "naive-ui";
 
 const page = ref(1);
+const scanning = ref(false);
 
 interface PDFRenderer {
   renderPage(
     page: number,
     scale: number
   ): Promise<{
     blob: Blob;
+    width: number;
+    height: number;
   }>;
   getNumPages(): Promise<number>;
 }
@@ -61,26 +68,35 @@ const image = computedAsync(async () => {
       width: undefined,
     };
 
-  const { blob } = await props.pdfRenderer.renderPage(page.value, props.scale);
+  const { blob, width, height } = await props.pdfRenderer.renderPage(
+    page.value,
+    props.scale
+  );
   return {
     blob,
+    width,
+    height,
   };
 });
 
 let controller = new AbortController();
 
-const scanImage = computedAsync(async () => {
-  controller.abort();
-  controller = new AbortController();
-  if (!props.scanRenderer || !image.value.blob) return;
+const scanImage = computedAsync(
+  async () => {
+    controller.abort();
+    controller = new AbortController();
+    if (!props.scanRenderer || !image.value.blob) return;
 
-  const { blob } = await props.scanRenderer.renderPage(image.value.blob, {
-    signal: controller.signal,
-  });
-  return {
-    blob,
-  };
-});
+    const { blob } = await props.scanRenderer.renderPage(image.value.blob, {
+      signal: controller.signal,
+    });
+    return {
+      blob,
+    };
+  },
+  undefined,
+  scanning
+);
 
 const numPages = computedAsync(async () => {
   page.value = 1;