Add placeholders while the workflow is loading

#37

src/views/workflows/ListWorkflowsView.vue

@@ -132,13 +132,12 @@ onMounted(() => {
     >
       <bootstrap-icon
         icon="x-lg"
-        class="mb-5"
+        class="my-5"
         width="75"
         height="75"
         style="color: var(--bs-secondary)"
       />
-      <br />
-      There are no workflows in the system. Please come again later.
+      <p>There are no workflows in the system. Please come again later.</p>
     </div>
     <div
       v-else-if="processedWorkflows.length === 0"
@@ -146,15 +145,16 @@ onMounted(() => {
     >
       <bootstrap-icon
         icon="search"
-        class="mb-5"
+        class="my-5"
         width="75"
         height="75"
         style="color: var(--bs-secondary)"
       />
-      <br />
-      Could not find any Workflows containing<br />'{{
-        workflowsState.filterString
-      }}'
+      <p>
+        Could not find any Workflows containing<br />'{{
+          workflowsState.filterString
+        }}'
+      </p>
     </div>
     <CardTransitionGroup
       v-else

src/views/workflows/WorkflowVersionView.vue

@@ -62,6 +62,7 @@ onMounted(() => {
 });
 
 function downloadVersionFiles(version: WorkflowVersionFull) {
+  versionState.fileLoading = true;
   const descriptionPromise = axios.get(version.readme_url).then((response) => {
     versionState.descriptionMarkdown = response.data;
   });
@@ -76,7 +77,6 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
   Promise.all([descriptionPromise, changelogPromise, parameterPromise]).finally(
     () => {
       versionState.fileLoading = false;
-      console.log("All loaded");
     }
   );
 }
@@ -110,7 +110,22 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
       </router-link>
     </li>
   </ul>
-  <div v-if="versionState.loading"></div>
+  <div v-if="versionState.fileLoading">
+    <p class="placeholder-glow mt-2 mb-4">
+      <span class="placeholder col-7 fs-1"></span>
+    </p>
+    <p
+      v-for="n in 8"
+      :key="n"
+      class="placeholder-glow row ms-1"
+      :class="'my-' + Math.floor(Math.random() * 6)"
+    >
+      <span
+        class="placeholder"
+        :class="'col-' + Math.floor(Math.random() * 9 + 2)"
+      ></span>
+    </p>
+  </div>
   <div v-else>
     <p v-if="props.activeTab === 'description'">
       <markdown-renderer :markdown="versionState.descriptionMarkdown" />

src/views/workflows/WorkflowView.vue

@@ -15,7 +15,6 @@ const route = useRoute();
 const workflowState = reactive({
   loading: true,
   workflow: undefined,
-  errorLoading: false,
   activeVersionId: "",
 } as {
   loading: boolean;
@@ -81,7 +80,25 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="workflowState.workflow != null">
+  <div v-if="workflowState.loading">
+    <div
+      class="d-flex mt-5 justify-content-between align-items-center placeholder-glow"
+    >
+      <span class="fs-0 placeholder col-6"></span>
+      <span class="fs-0 placeholder col-1"></span>
+    </div>
+    <div class="fs-4 mb-5 mt-4 placeholder-glow">
+      <span class="placeholder col-10"></span>
+    </div>
+    <div class="row align-items-center placeholder-glow my-1">
+      <span class="mx-auto col-2 placeholder bg-success fs-0"></span>
+      <span class="position-absolute end-0 col-1 placeholder fs-2"></span>
+    </div>
+    <div class="row w-100 mb-4 mt-3 mx-0 placeholder-glow">
+      <span class="placeholder col-3 mx-auto"></span>
+    </div>
+  </div>
+  <div v-else-if="workflowState.workflow != null">
     <div class="d-flex justify-content-between align-items-center">
       <span class="fs-0 w-fit">{{ workflowState.workflow.name }}</span>
       <a :href="workflowState.workflow.repository_url" target="_blank">
@@ -130,7 +147,20 @@ onMounted(() => {
         ></a
       >
     </div>
-    <router-view />
+  </div>
+  <router-view v-if="workflowState.loading || workflowState.workflow != null" />
+  <div v-else class="text-center fs-1 mt-5">
+    <bootstrap-icon
+      icon="search"
+      class="my-5"
+      width="85"
+      height="85"
+      style="color: var(--bs-secondary)"
+    />
+    <p class="my-5">
+      Could not find any Workflow with ID <br />'{{ workflowId }}'
+    </p>
+    <router-link :to="{ name: 'workflows' }" class="mt-5">Back</router-link>
   </div>
 </template>