From 17ed703431297e4318dd7c0067ad39da8ee422e1 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 11:49:51 +0200
Subject: [PATCH 1/7] Rename Help to HelpBox

---
 src/components/{Help.vue => HelpBox.vue}  | 0
 src/corpora/CreateCorpus.vue              | 4 ++--
 src/corpora/Dashboard.vue                 | 6 +++---
 src/corpus/CorpusStateHelp.vue            | 6 +++---
 src/corpus/config/CorpusConfiguration.vue | 6 +++---
 src/corpus/config/CorpusMetadata.vue      | 6 +++---
 src/corpus/corpusState.composable.js      | 4 +++-
 src/corpus/exports/CorpusResult.vue       | 6 +++---
 8 files changed, 20 insertions(+), 18 deletions(-)
 rename src/components/{Help.vue => HelpBox.vue} (100%)

diff --git a/src/components/Help.vue b/src/components/HelpBox.vue
similarity index 100%
rename from src/components/Help.vue
rename to src/components/HelpBox.vue
diff --git a/src/corpora/CreateCorpus.vue b/src/corpora/CreateCorpus.vue
index 673fce0..7b9d61d 100644
--- a/src/corpora/CreateCorpus.vue
+++ b/src/corpora/CreateCorpus.vue
@@ -1,7 +1,7 @@
 <template>
   <PageTitle>{{ $t("new_corpus") }}</PageTitle>
   <Section>
-    <Help>{{ $t("corpus.create.help") }}</Help>
+    <HelpBox>{{ $t("corpus.create.help") }}</HelpBox>
 
     <PendingContent on="create">
       <FormKit
@@ -66,7 +66,7 @@ import PendingContent from "@/spin/PendingContent.vue";
 import { FORMATS_EXT } from "@/api/corpusConfig";
 import { useAuth } from "@/auth/auth.composable";
 import useCorpora from "./corpora.composable";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 
 const { requireAuthentication } = useAuth();
 const { createFromConfig } = useCorpora();
diff --git a/src/corpora/Dashboard.vue b/src/corpora/Dashboard.vue
index 88cd87a..75714db 100644
--- a/src/corpora/Dashboard.vue
+++ b/src/corpora/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <Section :title="$t('corpuses')">
-    <Help>
+    <HelpBox>
       <p>
         {{
           corpusStore.hasCorpora
@@ -8,7 +8,7 @@
             : $t("dashboard.help.corpora.none")
         }}
       </p>
-    </Help>
+    </HelpBox>
 
     <PendingContent
       v-if="isAuthenticated"
@@ -47,7 +47,7 @@ import PendingContent from "@/spin/PendingContent.vue";
 import CorpusButton from "./CorpusButton.vue";
 import { useAuth } from "@/auth/auth.composable";
 import SourceUpload from "@/corpus/sources/SourceUpload.vue";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 import useCorpora from "@/corpora/corpora.composable";
 import { useCorpusStore } from "@/store/corpus.store";
 
diff --git a/src/corpus/CorpusStateHelp.vue b/src/corpus/CorpusStateHelp.vue
index 3ca6d8c..4fca8c8 100644
--- a/src/corpus/CorpusStateHelp.vue
+++ b/src/corpus/CorpusStateHelp.vue
@@ -1,15 +1,15 @@
 <script setup>
 import useCorpusIdParam from "./corpusIdParam.composable";
 import { useCorpusState } from "./corpusState.composable";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 
 const corpusId = useCorpusIdParam();
 const { stateHelp } = useCorpusState(corpusId);
 </script>
 
 <template>
-  <Help v-if="stateHelp">
+  <HelpBox v-if="stateHelp">
     <icon :icon="['far', 'lightbulb']" class="mr-1" />
     {{ stateHelp }}
-  </Help>
+  </HelpBox>
 </template>
diff --git a/src/corpus/config/CorpusConfiguration.vue b/src/corpus/config/CorpusConfiguration.vue
index 438215b..8b21756 100644
--- a/src/corpus/config/CorpusConfiguration.vue
+++ b/src/corpus/config/CorpusConfiguration.vue
@@ -11,9 +11,9 @@
       @submit="submit"
     >
       <Section :title="$t('configuration')">
-        <Help>
+        <HelpBox>
           <p>{{ $t("config.configuration.help") }}</p>
-        </Help>
+        </HelpBox>
 
         <FormKit
           name="format"
@@ -93,7 +93,7 @@ import PendingContent from "@/spin/PendingContent.vue";
 import useConfig from "./config.composable";
 import { FORMATS_EXT, SEGMENTERS } from "@/api/corpusConfig";
 import useMessenger from "@/message/messenger.composable";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 import useSources from "../sources/sources.composable";
 
 const router = useRouter();
diff --git a/src/corpus/config/CorpusMetadata.vue b/src/corpus/config/CorpusMetadata.vue
index 861cab8..1f894b7 100644
--- a/src/corpus/config/CorpusMetadata.vue
+++ b/src/corpus/config/CorpusMetadata.vue
@@ -10,9 +10,9 @@
       @submit="submit"
     >
       <Section :title="$t('metadata')">
-        <Help>
+        <HelpBox>
           <p>{{ $t("config.metadata.help") }}</p>
-        </Help>
+        </HelpBox>
 
         <div class="grid md:grid-cols-2 gap-x-4">
           <FormKit type="group" name="name">
@@ -64,7 +64,7 @@ import Section from "@/components/Section.vue";
 import useConfig from "./config.composable";
 import TaggedInput from "./TaggedInput.vue";
 import useMessenger from "@/message/messenger.composable";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 
 const router = useRouter();
 const corpusId = useCorpusIdParam();
diff --git a/src/corpus/corpusState.composable.js b/src/corpus/corpusState.composable.js
index 0207bd7..521b8a7 100644
--- a/src/corpus/corpusState.composable.js
+++ b/src/corpus/corpusState.composable.js
@@ -45,7 +45,9 @@ export function useCorpusState(corpusId) {
   const isNeedingMeta = computed(
     () => corpusState.value == CorpusState.NEEDING_META
   );
-const canBeReady = computed(() => !isEmpty.value && !isNeedingConfig.value && !isNeedingMeta.value)
+  const canBeReady = computed(
+    () => !isEmpty.value && !isNeedingConfig.value && !isNeedingMeta.value
+  );
 
   const isFailed = computed(
     () =>
diff --git a/src/corpus/exports/CorpusResult.vue b/src/corpus/exports/CorpusResult.vue
index 8db8354..b58a9f7 100644
--- a/src/corpus/exports/CorpusResult.vue
+++ b/src/corpus/exports/CorpusResult.vue
@@ -1,9 +1,9 @@
 <template>
   <PendingContent :on="`corpus/${corpusId}/exports`">
     <Section :title="$t('result')">
-      <Help>
+      <HelpBox>
         <p>{{ $t("exports.help") }}</p>
-      </Help>
+      </HelpBox>
 
       <div class="my-4">
         {{ $t("download_export") }}:
@@ -49,7 +49,7 @@ import ActionButton from "@/components/ActionButton.vue";
 import PendingContent from "@/spin/PendingContent.vue";
 import Section from "@/components/Section.vue";
 import useExports from "./exports.composable";
-import Help from "@/components/Help.vue";
+import HelpBox from "@/components/HelpBox.vue";
 import useLocale from "@/i18n/locale.composable";
 
 const corpusId = useCorpusIdParam();

From a2d4eaf418994dbe5d60fa85dd5306e79652fad8 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 12:11:40 +0200
Subject: [PATCH 2/7] Help box gray unless action is needed

---
 src/components/HelpBox.vue           | 15 ++++++++++++++-
 src/corpus/CorpusStateHelp.vue       |  4 ++--
 src/corpus/corpusState.composable.js |  8 ++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/HelpBox.vue b/src/components/HelpBox.vue
index 00c4b19..b73360c 100644
--- a/src/components/HelpBox.vue
+++ b/src/components/HelpBox.vue
@@ -1,6 +1,19 @@
+<script setup>
+defineProps({
+  important: {
+    type: Boolean,
+  },
+});
+</script>
+
 <template>
   <div
-    class="my-2 border-2 border-blue-300 bg-blue-100 dark:bg-sky-200 dark:border-0 dark:text-sky-800 rounded p-2 px-4 max-w-screen-sm"
+    class="my-2 rounded p-2 px-4 max-w-screen-sm"
+    :class="
+      important
+        ? ' bg-blue-100 border-2 border-blue-300 dark:bg-sky-200 dark:border-0 dark:text-sky-800'
+        : 'bg-stone-100 dark:bg-zinc-700 dark:border-0'
+    "
   >
     <slot />
   </div>
diff --git a/src/corpus/CorpusStateHelp.vue b/src/corpus/CorpusStateHelp.vue
index 4fca8c8..f176294 100644
--- a/src/corpus/CorpusStateHelp.vue
+++ b/src/corpus/CorpusStateHelp.vue
@@ -4,11 +4,11 @@ import { useCorpusState } from "./corpusState.composable";
 import HelpBox from "@/components/HelpBox.vue";
 
 const corpusId = useCorpusIdParam();
-const { stateHelp } = useCorpusState(corpusId);
+const { stateHelp, isActionNeeded } = useCorpusState(corpusId);
 </script>
 
 <template>
-  <HelpBox v-if="stateHelp">
+  <HelpBox v-if="stateHelp" :important="isActionNeeded">
     <icon :icon="['far', 'lightbulb']" class="mr-1" />
     {{ stateHelp }}
   </HelpBox>
diff --git a/src/corpus/corpusState.composable.js b/src/corpus/corpusState.composable.js
index 521b8a7..45feb66 100644
--- a/src/corpus/corpusState.composable.js
+++ b/src/corpus/corpusState.composable.js
@@ -66,6 +66,13 @@ export function useCorpusState(corpusId) {
 
   const stateMessage = computed(() => t(`corpus.state.${corpusState.value}`));
   const stateHelp = computed(() => t(`corpus.state.help.${corpusState.value}`));
+  const isActionNeeded = computed(
+    () =>
+      isEmpty.value ||
+      isNeedingConfig.value ||
+      isNeedingMeta.value ||
+      isFailed.value
+  );
 
   return {
     corpusState,
@@ -81,6 +88,7 @@ export function useCorpusState(corpusId) {
     isDoneInstall,
     stateMessage,
     stateHelp,
+    isActionNeeded,
   };
 }
 

From 2e38d42b563628eb60a18853789384aa10a3d278 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 13:59:41 +0200
Subject: [PATCH 3/7] Indicate allowed file formats, fix #98

---
 src/api/backendInfo.composable.js        | 7 ++-----
 src/components/HelpBox.vue               | 2 +-
 src/corpus/sources/SourceUpload.vue      | 7 ++++++-
 src/corpus/sources/sources.composable.js | 2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/api/backendInfo.composable.js b/src/api/backendInfo.composable.js
index a6abef8..047b3d1 100644
--- a/src/api/backendInfo.composable.js
+++ b/src/api/backendInfo.composable.js
@@ -8,11 +8,8 @@ api.getInfo().then((values) => Object.assign(info, values));
 export default function useMinkBackendInfo() {
   const hasInfo = computed(() => Object.keys(info).length);
 
-  const findInfo = (field, name) => {
-    console.log(info);
-    return info[field]?.data.find((item) => item.name == name).value;
-  };
-
+  const findInfo = (field, name) =>
+    info[field]?.data.find((item) => item.name == name).value;
   return {
     info,
     hasInfo,
diff --git a/src/components/HelpBox.vue b/src/components/HelpBox.vue
index b73360c..705e8d8 100644
--- a/src/components/HelpBox.vue
+++ b/src/components/HelpBox.vue
@@ -11,7 +11,7 @@ defineProps({
     class="my-2 rounded p-2 px-4 max-w-screen-sm"
     :class="
       important
-        ? ' bg-blue-100 border-2 border-blue-300 dark:bg-sky-200 dark:border-0 dark:text-sky-800'
+        ? 'bg-blue-100 border-2 border-blue-300 dark:bg-sky-200 dark:border-0 dark:text-sky-800'
         : 'bg-stone-100 dark:bg-zinc-700 dark:border-0'
     "
   >
diff --git a/src/corpus/sources/SourceUpload.vue b/src/corpus/sources/SourceUpload.vue
index 7fb2178..ff92c73 100644
--- a/src/corpus/sources/SourceUpload.vue
+++ b/src/corpus/sources/SourceUpload.vue
@@ -35,6 +35,7 @@
               type="file"
               class="hidden"
               multiple
+              :accept="extensionsAccept"
               @change="handleFileInput"
             />
 
@@ -47,6 +48,7 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import useMessenger from "@/message/messenger.composable";
 import useSources from "./sources.composable";
 import Filedrop from "./Filedrop.vue";
@@ -65,8 +67,11 @@ const props = defineProps({
 });
 
 const corpusId = useCorpusIdParam();
-const { uploadSources } = useSources(corpusId);
+const { uploadSources, extensions } = useSources(corpusId);
 const { clear, alertError } = useMessenger();
+const extensionsAccept = computed(() =>
+  extensions.value?.map((ext) => `.${ext}`).join()
+);
 
 async function defaultFileHandler(files) {
   return uploadSources(files).catch(alertError);
diff --git a/src/corpus/sources/sources.composable.js b/src/corpus/sources/sources.composable.js
index 03f2e17..1fd594e 100644
--- a/src/corpus/sources/sources.composable.js
+++ b/src/corpus/sources/sources.composable.js
@@ -34,7 +34,7 @@ export default function useSources(corpusId) {
     loadSources();
   }
 
-  /** Find file extensions present in source files. */
+  /** Find file extensions present in source files. Undefined if no files. */
   const extensions = computed(() =>
     uniq(
       corpusStore.corpora[corpusId]?.sources?.map((source) =>

From 1febfdc29ecb12c378303b3e9e6e9b33e49df018 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 14:23:55 +0200
Subject: [PATCH 4/7] Clarify metadata input language, fix #78

---
 src/corpus/config/CorpusMetadata.vue | 30 +++++++++++++++-------------
 src/corpus/config/TaggedInput.vue    | 12 -----------
 2 files changed, 16 insertions(+), 26 deletions(-)
 delete mode 100644 src/corpus/config/TaggedInput.vue

diff --git a/src/corpus/config/CorpusMetadata.vue b/src/corpus/config/CorpusMetadata.vue
index 1f894b7..c23b1f6 100644
--- a/src/corpus/config/CorpusMetadata.vue
+++ b/src/corpus/config/CorpusMetadata.vue
@@ -14,33 +14,35 @@
           <p>{{ $t("config.metadata.help") }}</p>
         </HelpBox>
 
-        <div class="grid md:grid-cols-2 gap-x-4">
-          <FormKit type="group" name="name">
-            <TaggedInput v-for="lang in ['swe', 'eng']" :key="lang" :tag="lang">
+        <div class="grid md:grid-cols-2 gap-4">
+          <Panel
+            v-for="(lang2, lang3) of { swe: 'sv', eng: 'en' }"
+            :key="lang3"
+            :title="$t(lang2)"
+          >
+            <FormKit type="group" name="name">
               <FormKit
-                :name="lang"
+                :name="lang3"
                 :label="$t('name')"
-                :value="config.name?.[lang]"
+                :value="config.name?.[lang3]"
                 :help="$t('metadata.name.help')"
                 type="text"
                 input-class="w-72"
                 validation="required:trim"
               />
-            </TaggedInput>
-          </FormKit>
+            </FormKit>
 
-          <FormKit type="group" name="description">
-            <TaggedInput v-for="lang in ['swe', 'eng']" :key="lang" :tag="lang">
+            <FormKit type="group" name="description">
               <FormKit
-                :name="lang"
+                :name="lang3"
                 :label="$t('description')"
-                :value="config.description?.[lang]"
+                :value="config.description?.[lang3]"
                 :help="$t('metadata.description.help')"
                 type="textarea"
                 input-class="w-full h-20"
               />
-            </TaggedInput>
-          </FormKit>
+            </FormKit>
+          </Panel>
         </div>
 
         <FormKit
@@ -62,9 +64,9 @@ import { useRouter } from "vue-router";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import Section from "@/components/Section.vue";
 import useConfig from "./config.composable";
-import TaggedInput from "./TaggedInput.vue";
 import useMessenger from "@/message/messenger.composable";
 import HelpBox from "@/components/HelpBox.vue";
+import Panel from "@/components/Panel.vue";
 
 const router = useRouter();
 const corpusId = useCorpusIdParam();
diff --git a/src/corpus/config/TaggedInput.vue b/src/corpus/config/TaggedInput.vue
deleted file mode 100644
index 7e8a2ea..0000000
--- a/src/corpus/config/TaggedInput.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-defineProps(["tag"]);
-</script>
-
-<template>
-  <div class="flex items-baseline">
-    <span class="text-sm bg-gray-200 dark:bg-zinc-500 p-1 mr-1">{{ tag }}</span>
-    <div class="flex-1">
-      <slot />
-    </div>
-  </div>
-</template>

From 4ff9d89e9471895498363bedf7b76218a763616f Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 17:28:05 +0200
Subject: [PATCH 5/7] Spinner when creating corpus

---
 src/corpora/CreateCorpus.vue |  5 ++++-
 src/corpora/Dashboard.vue    | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/corpora/CreateCorpus.vue b/src/corpora/CreateCorpus.vue
index 7b9d61d..af2a70e 100644
--- a/src/corpora/CreateCorpus.vue
+++ b/src/corpora/CreateCorpus.vue
@@ -62,6 +62,7 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import PageTitle from "@/components/PageTitle.vue";
 import Section from "@/components/Section.vue";
+import useSpin from "@/spin/spin.composable";
 import PendingContent from "@/spin/PendingContent.vue";
 import { FORMATS_EXT } from "@/api/corpusConfig";
 import { useAuth } from "@/auth/auth.composable";
@@ -71,6 +72,7 @@ import HelpBox from "@/components/HelpBox.vue";
 const { requireAuthentication } = useAuth();
 const { createFromConfig } = useCorpora();
 const { t } = useI18n();
+const { spin } = useSpin();
 
 const formatOptions = computed(() =>
   FORMATS_EXT.reduce(
@@ -85,11 +87,12 @@ const formatOptions = computed(() =>
 requireAuthentication();
 
 async function submit(fields) {
-  await createFromConfig(
+  const createPromise = createFromConfig(
     fields.name,
     fields.description,
     fields.format,
     fields.textAnnotation
   );
+  await spin(createPromise, null, "create");
 }
 </script>
diff --git a/src/corpora/Dashboard.vue b/src/corpora/Dashboard.vue
index 75714db..2cdfa78 100644
--- a/src/corpora/Dashboard.vue
+++ b/src/corpora/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <Section :title="$t('corpuses')">
+  <Section v-if="isAuthenticated" :title="$t('corpuses')">
     <HelpBox>
       <p>
         {{
@@ -10,11 +10,7 @@
       </p>
     </HelpBox>
 
-    <PendingContent
-      v-if="isAuthenticated"
-      on="corpora"
-      class="flex flex-wrap -mx-2"
-    >
+    <PendingContent on="corpora" class="flex flex-wrap -mx-2">
       <router-link
         v-for="(corpus, corpusId) of corpusStore.corpora"
         :key="corpusId"
@@ -32,11 +28,13 @@
       </router-link>
     </PendingContent>
   </Section>
-  <Section :title="$t('new_corpus')">
-    <SourceUpload
-      :file-handler="createCorpusFromFiles"
-      :variant="corpusStore.hasCorpora ? null : 'primary'"
-    />
+  <Section v-if="isAuthenticated" :title="$t('new_corpus')">
+    <PendingContent on="create">
+      <SourceUpload
+        :file-handler="createCorpusFromFiles"
+        :variant="corpusStore.hasCorpora ? null : 'primary'"
+      />
+    </PendingContent>
   </Section>
 </template>
 
@@ -50,14 +48,16 @@ import SourceUpload from "@/corpus/sources/SourceUpload.vue";
 import HelpBox from "@/components/HelpBox.vue";
 import useCorpora from "@/corpora/corpora.composable";
 import { useCorpusStore } from "@/store/corpus.store";
+import useSpin from "@/spin/spin.composable";
 
 const corpusStore = useCorpusStore();
 const { requireAuthentication, isAuthenticated } = useAuth();
 const { loadCorpora, createFromUpload } = useCorpora();
+const { spin } = useSpin();
 
 requireAuthentication(loadCorpora);
 
 async function createCorpusFromFiles(files) {
-  await createFromUpload(files);
+  await spin(createFromUpload(files), null, "create");
 }
 </script>

From a80f6b6e8b5bf9aa8e9435b68e5e63a149a0c678 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 17:32:50 +0200
Subject: [PATCH 6/7] Show logout link if access denied, fix #85

---
 src/App.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1e20cd1..21348a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,9 +31,12 @@
 
           <div class="mt-2 flex flex-wrap gap-4 items-baseline justify-end">
             <template v-if="payload">
-              <router-link to="/user" class="text-inherit pt-0.5">
+              <router-link v-if="canUserWrite" to="/user" class="text-inherit">
                 {{ payload.name }}
               </router-link>
+              <a v-else :href="getLogoutUrl()" class="text-inherit">
+                {{ $t("logout") }}
+              </a>
             </template>
 
             <LocaleSwitcher />
@@ -62,6 +65,7 @@
 <script setup>
 import { useTitle } from "@vueuse/core";
 import { api } from "@/api/api";
+import { getLogoutUrl } from "@/auth/auth";
 import { useAuth } from "@/auth/auth.composable";
 import useLocale from "@/i18n/locale.composable";
 import LocaleSwitcher from "@/i18n/LocaleSwitcher.vue";
@@ -73,7 +77,7 @@ import logoSbxLight from "@/assets/sbx1r-light.svg";
 import usePageTitle from "./title.composable";
 import Breadcrumb from "./Breadcrumb.vue";
 
-const { refreshJwt, payload } = useAuth();
+const { refreshJwt, payload, canUserWrite } = useAuth();
 useLocale();
 const { title } = usePageTitle();
 useTitle(title, { titleTemplate: "%s | Mink" });

From 2d92c381c892c1ade6a15562e544aa8f65dba1dc Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 14 Jul 2023 17:40:44 +0200
Subject: [PATCH 7/7] Spinner when loading corpora

---
 src/corpora/CorpusButton.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/corpora/CorpusButton.vue b/src/corpora/CorpusButton.vue
index 3aeb3f5..4391506 100644
--- a/src/corpora/CorpusButton.vue
+++ b/src/corpora/CorpusButton.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script setup>
+import useSpin from "@/spin/spin.composable";
 import useConfig from "@/corpus/config/config.composable";
 import PadButton from "@/components/PadButton.vue";
 import CorpusStateMessage from "@/corpus/CorpusStateMessage.vue";
@@ -28,8 +29,9 @@ const props = defineProps({
 const corpusStore = useCorpusStore();
 const { loadCorpus } = useCorpus(props.id);
 const { corpusName } = useConfig(props.id);
+const { spin } = useSpin();
 
 const corpus = corpusStore.corpora[props.id];
 
-loadCorpus();
+spin(loadCorpus(), null, "corpora");
 </script>