changed render modes

app/pages/index.vue

@@ -6,6 +6,9 @@
   useHead({
     title: "Youtube 2 MP3"
   })
+  definePageMeta({
+    prerender: true // HTML prerender (faster)
+  })
 
   const { loggedIn } = useUserSession()
   const conf = useRuntimeConfig()

app/pages/login.vue

@@ -6,11 +6,19 @@ import urlJoin from 'url-join'
 useHead({
   title: "Login"
 })
+definePageMeta({
+  ssr: false // CSR
+})
 
 const toast = useToast()
 const config = useRuntimeConfig()
 
+// animation & status refs
 const wrong_login = ref(false)
+const login_pending = ref(false)
+
+// variable of timeout type
+let wrong_login_timeout : ReturnType<typeof setTimeout>
 
 const fields: AuthFormField[] = [{
   name: 'email',
@@ -41,8 +49,12 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-function onSubmit(payload: FormSubmitEvent<Schema>) {
-  return $fetch("/login", {
+async function onSubmit(payload: FormSubmitEvent<Schema>) {
+  clearTimeout(wrong_login_timeout); // cancel the timeout
+  wrong_login.value = false // hide it if it was 
+  login_pending.value = true // mark it as pending
+
+  await $fetch("/login", {
     method: "POST",
     body: {
       email: payload.data.email,
@@ -50,12 +62,14 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
       remember: payload.data.remember || false
     }
   }).then((r) => {
+      login_pending.value = false
       navigateTo(useBasedPath("/"), { external: true})
   }).catch((err) => {
     if(err.data.statusCode == 401) {
+      login_pending.value = false
       wrong_login.value = true;
       // show for 5 seconds
-      setTimeout(() => wrong_login.value = false, 5000);
+      wrong_login_timeout = setTimeout(() => wrong_login.value = false, 5000);
     }
   })
 }
@@ -73,7 +87,7 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
           label: 'Login',
           class: 'rounded-full',
           variant: 'soft',
-          loadingAuto: true
+          loading: login_pending
         }"
         @submit="onSubmit"
     >

app/pages/settings/general.vue

@@ -8,7 +8,7 @@
 
     definePageMeta({
         layout: "settings",
-        middleware: ["login-required"]
+        ssr: false, // force CSR
     })
     const toast = useToast()
     const conf = useRuntimeConfig()

app/pages/settings/security.vue

@@ -9,6 +9,7 @@
 
     definePageMeta({
         layout: "settings",
+        ssr: false // force CSR
     })
     const loading_btn = ref(false)
     const toast = useToast()