Delay and ease in loading text

frontend/src/components/Markdown.vue

@@ -6,6 +6,7 @@ import { useInternalApi } from "~/composables/useApi";
 import { handleRequestError } from "~/composables/useErrorHandling";
 import Spinner from "~/lib/components/design/Spinner.vue";
 import { usePrismStore } from "~/store/prism";
+import Delayed from "~/lib/components/design/Delayed.vue";
 
 const i18n = useI18n();
 const props = withDefaults(
@@ -31,7 +32,8 @@ async function fetch() {
   }).catch<any>((e) => handleRequestError(e));
   loading.value = false;
 }
-await fetch();
+
+fetch();
 
 watchPostEffect(async () => {
   if (!import.meta.env.SSR) {
@@ -98,10 +100,14 @@ function setupAdmonition() {
 </script>
 
 <template>
-  <div :class="{ 'prose max-w-full rounded markdown break-words': true, 'p-4': !inline, inline: inline }">
+  <div class="prose max-w-full rounded markdown break-words" :class="{ 'p-4': !inline, inline: inline }">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-if="!loading" v-bind="$attrs" v-html="renderedMarkdown" />
-    <div v-else><Spinner class="stroke-gray-400" /></div>
+    <div v-else>
+      <Delayed>
+        <Spinner class="stroke-gray-400" />
+      </Delayed>
+    </div>
   </div>
 </template>
 

frontend/src/composables/useCookies.ts

@@ -20,7 +20,7 @@ export const useCookies = () => {
       const old = res.getHeader("set-cookie");
       const newCookie = change.value === undefined ? change.name + "=" : cookie.serialize(change.name, change.value, change.options);
       const val = old ? old + "; " + newCookie : newCookie;
-      console.log("setting cookie header to " + val);
+      console.debug("Setting cookie header to " + val);
       res.setHeader("set-cookie", val);
     });
     return cookies;

frontend/src/lib

@@ -1 +1 @@
-Subproject commit 4951f93605fb74a74b76335e39563ebeffbf9323
+Subproject commit 5ec08f9a3e31d23e19fa73bb1cff06cd8c8161ae

frontend/src/pages/[user].vue

@@ -6,6 +6,7 @@ import { Organization } from "hangar-internal";
 import { useOrganization, useUser } from "~/composables/useApiHelper";
 import { useErrorRedirect } from "~/lib/composables/useErrorRedirect";
 import { createError, navigateTo } from "#imports";
+import Delayed from "~/lib/components/design/Delayed.vue";
 
 const i18n = useI18n();
 const route = useRoute();
@@ -15,7 +16,7 @@ if (!user || !user.value) {
   throw useErrorRedirect(useRoute(), 404, "Not found");
 } else if (route.params.user !== user.value?.name) {
   const newPath = route.fullPath.replace(route.params.user as string, user.value?.name);
-  console.log("redirect to " + newPath + " from (" + route.fullPath + ")");
+  console.debug("Redirect to " + newPath + " from (" + route.fullPath + ")");
   await navigateTo(newPath);
   throw createError("dummy");
 } else if (user.value?.isOrganization) {
@@ -27,7 +28,7 @@ if (!user || !user.value) {
   <router-view v-if="user" v-slot="{ Component }">
     <Suspense>
       <component :is="Component" :user="user" :organization="organization" />
-      <template #fallback> Loading... </template>
+      <template #fallback><Delayed> Loading... </Delayed></template>
     </Suspense>
   </router-view>
 </template>

frontend/src/pages/[user]/[project].vue

@@ -9,6 +9,7 @@ import { useErrorRedirect } from "~/lib/composables/useErrorRedirect";
 import ProjectHeader from "~/components/projects/ProjectHeader.vue";
 import ProjectNav from "~/components/projects/ProjectNav.vue";
 import { createError, navigateTo } from "#imports";
+import Delayed from "~/lib/components/design/Delayed.vue";
 
 defineProps({
   user: {
@@ -24,7 +25,7 @@ if (!project || !project.value) {
   throw useErrorRedirect(route, 404, "Not found");
 } else if (route.params.project !== project.value?.namespace.slug) {
   const newPath = route.fullPath.replace(route.params.project as string, project.value?.namespace.slug);
-  console.log("redirect to " + newPath + " from (" + route.fullPath + ")");
+  console.debug("Redirect to " + newPath + " from (" + route.fullPath + ")");
   await navigateTo(newPath);
   throw createError("dummy");
 }
@@ -41,7 +42,9 @@ provide("updateProjectPages", function (pages: HangarProjectPage[]) {
     <router-view v-slot="{ Component }">
       <Suspense>
         <component :is="Component" v-model:project="project" :user="user" />
-        <template #fallback> Loading... </template>
+        <template #fallback>
+          <Delayed> Loading... </Delayed>
+        </template>
       </Suspense>
     </router-view>
   </div>

frontend/src/pages/[user]/[project]/versions/[version].vue

@@ -5,6 +5,7 @@ import { HangarProject } from "hangar-internal";
 import { useProjectVersionsInternal } from "~/composables/useApiHelper";
 import { useErrorRedirect } from "~/lib/composables/useErrorRedirect";
 import { Platform } from "~/types/enums";
+import Delayed from "~/lib/components/design/Delayed.vue";
 
 const i18n = useI18n();
 const route = useRoute();
@@ -30,7 +31,7 @@ if (version && version.value) {
   <router-view v-slot="{ Component }">
     <Suspense>
       <component :is="Component" :project="project" :version="version" :version-platforms="versionPlatforms" />
-      <template #fallback> Loading... </template>
+      <template #fallback> <Delayed> Loading... </Delayed> </template>
     </Suspense>
   </router-view>
 </template>