auth loader

src/components/Auth.vue

@@ -4,6 +4,10 @@ import 'firebase/compat/auth'
 import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 
+const props = defineProps<{
+  authenticating: boolean
+}>()
+
 const emit = defineEmits<{
   signedIn: [authResult: any]
 }>()
@@ -35,5 +39,6 @@ const uiConfig = {
 onMounted(() => ui.start('#auth', uiConfig))
 </script>
 <template>
-  <div id="auth"></div>
+  <div id="auth" v-show="!props.authenticating"></div>
+  <progress v-show="props.authenticating" class="progress progress-primary w-full"></progress>
 </template>

src/components/Modal.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 
-const show = defineModel<boolean>({ local: true, default: false })
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+  }>(),
+  {
+    open: false
+  }
+)
+
+const show = ref<boolean>(props.open)
 
 const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)

src/components/TopBar.vue

@@ -19,6 +19,7 @@ const signedIn = ref<boolean>(false)
 const closeAuthModal = async (close: () => Promise<boolean>) => {
   await close()
   signedIn.value = true
+  redirectPending.value = false
 }
 watch(user, () => {
   if (!user.value) signedIn.value = false
@@ -48,12 +49,12 @@ const redirectPending = ref<boolean>(isPendingRedirect())
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <Modal v-if="!signedIn" v-model="redirectPending">
+        <Modal v-if="!signedIn" :open="redirectPending">
           <template #activator="{ open }">
             <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
           </template>
           <template #default="{ close }">
-            <Auth @signedIn="closeAuthModal(close)" />
+            <Auth :authenticating="redirectPending" @signedIn="closeAuthModal(close)" />
           </template>
           <template #actions="{ close }">
             <button class="btn-sm btn" @click="close">Close</button>

vite.config.ts

@@ -12,7 +12,7 @@ const require = createRequire(import.meta.url)
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ script: { defineModel: true } }),
+    vue(),
     AutoImport({ imports: ['vue'] }),
     Components(),
     ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })