Defer loading large source text, fix #29

CHANGELOG.md

@@ -22,6 +22,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Changed
 
 - Extracted the concept of a Resource as a supertype of Corpus, in preparation for adding the Metadata resource type [#145](https://github.com/spraakbanken/mink-frontend/issues/145)
+- Defer loading source text if file is large [#29](https://github.com/spraakbanken/mink-frontend/issues/29)
 - Source text file content now look the same as log output
 
 ### Fixed

src/api/backend.composable.ts

@@ -52,7 +52,7 @@ export default function useMinkBackend() {
     spin(
       api.downloadSourceText(corpusId, filename),
       t("source.downloading_plain"),
-      `corpus/${corpusId}/sources/${filename}`,
+      `corpus/${corpusId}/sources/${filename}/plain`,
     );
 
   const uploadSources = (

src/corpus/sources/SourceText.vue

@@ -1,32 +1,51 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
+import once from "lodash/once";
 import { downloadFile } from "@/util";
 import ActionButton from "@/components/ActionButton.vue";
 import TextData from "@/components/TextData.vue";
 
+/** Defer loading if file is large. */
+const AUTOLOAD_LIMIT = 500_000;
+
 const props = defineProps<{
   load: () => Promise<string | undefined>;
   filename: string;
+  size?: number;
   noLoad?: boolean;
 }>();
 
 const text = ref();
-const loadPromise = props.load();
+const shouldDeferLoading = computed(() => (props.size || 0) > AUTOLOAD_LIMIT);
+
+/** Wraps the load call to ensure it's only called once (or not at all). */
+const load = once(() => props.load());
+
+/** Load text and store it for showing. */
+async function show() {
+  text.value = await load();
+}
 
+// Load the text unless it is disabled or only manual.
 onMounted(async () => {
-  if (!props.noLoad) text.value = await loadPromise;
+  if (!props.noLoad && !shouldDeferLoading.value) await show();
 });
 
 async function download() {
-  const text = await loadPromise;
+  const text = await load();
   downloadFile(text!, props.filename || "mink-source");
 }
 </script>
 
 <template>
   <TextData v-if="text" :text="text" />
 
-  <div class="my-2">
+  <div class="my-2 flex gap-2">
+    <ActionButton v-if="!noLoad && text === undefined" @click="show()">
+      <icon :icon="['fas', 'rotate']" class="mr-1" />
+      {{ $t("load") }}
+    </ActionButton>
+
     <ActionButton @click="download">
       <icon :icon="['far', 'file']" class="mr-1" />
       {{ $t("download") }}

src/corpus/sources/SourceView.vue

@@ -66,18 +66,22 @@ async function loadPlain() {
                 :load="loadRaw"
                 :filename="metadata.name"
                 :no-load="isBinary"
+                :size="metadata.size"
               />
             </PendingContent>
           </td>
         </tr>
         <tr v-if="!isPlaintext">
           <th>{{ $t("txt") }}</th>
           <td>
-            <PendingContent :on="`corpus/${corpusId}/sources/${filename}`">
+            <PendingContent
+              :on="`corpus/${corpusId}/sources/${filename}/plain`"
+            >
               <SourceText
                 v-if="isJobDone"
                 :load="loadPlain"
                 :filename="ensureExtension(metadata.name, 'txt')"
+                :size="metadata.size"
               />
               <div class="text-sm py-1">
                 {{ $t("source_text_help") }}

src/fontawesome.ts

@@ -16,6 +16,7 @@ import {
   faPen,
   faPersonRunning,
   faRightToBracket,
+  faRotate,
   faTriangleExclamation,
   faUserPlus,
   faXmark,
@@ -30,6 +31,7 @@ library.add(
   faPen,
   faPersonRunning,
   faRightToBracket,
+  faRotate,
   faSquareMinus,
   faSquarePlus,
   faTrashCan,

src/i18n/locales/en.yaml

@@ -173,6 +173,7 @@ txt: Plain text
 docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
+load: Load
 file.archive: Archive
 file.singles: Single files
 name: Name

src/i18n/locales/sv.yaml

@@ -168,6 +168,7 @@ txt: Ren text
 docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
+load: Ladda in
 file.archive: Arkivfil
 file.singles: Enskilda filer
 name: Namn