feat(page): add loading overlay

apps/page/astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
 import node from '@astrojs/node';
 import vue from '@astrojs/vue';
 
@@ -7,11 +8,13 @@ import tailwind from '@astrojs/tailwind';
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
-  adapter: node({
-    mode: 'standalone'
+  // adapter: node({
+  //   mode: 'standalone'
+  // }),
+  adapter: cloudflare({
+    platformProxy: {
+      enabled: true
+    }
   }),
-  integrations: [
-    vue({ appEntrypoint: '/src/app' }),
-    tailwind()
-  ]
+  integrations: [vue({ appEntrypoint: '/src/app' }), tailwind()]
 });

apps/page/package.json

@@ -17,10 +17,11 @@
     "@podlove/types": "workspace:*",
     "@podlove/clients": "workspace:*",
     "@podlove/webvtt-parser": "workspace:*",
-    "@astrojs/check": "0.3.1",
-    "@astrojs/node": "6.1.0",
-    "@astrojs/tailwind": "5.0.2",
-    "@astrojs/vue": "4.0.0",
+    "@astrojs/check": "0.8.1",
+    "@astrojs/node": "8.3.2",
+    "@astrojs/tailwind": "5.1.0",
+    "@astrojs/vue": "4.5.0",
+    "@astrojs/cloudflare": "11.0.1",
     "astro": "4.11.5",
     "vue": "3.2.30",
     "fast-xml-parser": "4.3.2",

apps/page/src/features/LoadingOverlay.vue

@@ -1,15 +1,37 @@
 <template>
-  <custom-transition type="fade">
-    <div class="fixed top-0 left-0 w-screen h-screen z-50 bg-gray-100" v-if="!state.initialized"></div>
-  </custom-transition>
+  <div
+    class="fixed top-0 left-0 w-screen h-screen z-50 bg-gray-100 loading-overlay"
+    :class="{ done, hidden }"
+  ></div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import { mapState } from 'redux-vuex';
 import { selectors } from '../logic/store';
-import CustomTransition from '../components/CustomTransition.vue';
+
+const hidden = ref(false);
 
 const state = mapState<{ initialized: boolean }>({
   initialized: selectors.colors.initialized
 });
+
+const done = computed(() => state.initialized);
+
+watch(done, () => {
+  setTimeout(() => {
+    hidden.value = true;
+  }, 250);
+});
 </script>
+
+<style scoped>
+.loading-overlay {
+  opacity: 1;
+  transition: opacity 250ms;
+}
+
+.loading-overlay.done {
+  opacity: 0;
+}
+</style>

apps/page/src/layouts/Layout.astro

@@ -34,7 +34,7 @@ const lang = getLanguage();
     <Colors client:only="vue" />
     <LoadingOverlay client:load />
     <LoadingBar client:only="vue" />
-    <PageHeader client:idle transition:persis="header" />
+    <PageHeader client:idle transition:persist="header" />
     <main transition:animate="fade">
       <slot></slot>
     </main>