refactor: update basic mode watch logic to check config loading state

ui/app/components/History.vue

@@ -351,7 +351,7 @@
                 </a>
               </div>
 
-              <div class="column">
+              <div class="column" v-if="!config.app.basic_mode">
                 <Dropdown icons="fa-solid fa-cogs" label="Actions">
                   <template v-if="'finished' === item.status && item.filename">
                     <NuxtLink @click="playVideo(item)" class="dropdown-item">

ui/app/components/NewDownload.vue

@@ -121,7 +121,8 @@
                   <span class="icon"><i class="fa-solid fa-terminal" /></span>
                   <span>Command options for yt-dlp</span>
                 </label>
-                <TextareaAutocomplete id="cli_options" v-model="form.cli" :options="ytDlpOpt" />
+                <TextareaAutocomplete id="cli_options" v-model="form.cli" :options="ytDlpOpt"
+                  :disabled="!socket.isConnected || addInProgress" />
                 <span class="help is-bold">
                   <span class="icon"><i class="fa-solid fa-info" /></span>
                   <span>

ui/app/layouts/default.vue

@@ -104,7 +104,15 @@
     <div>
       <Settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
       <NuxtLoadingIndicator />
-      <NuxtPage />
+      <NuxtPage v-if="config.is_loaded" />
+      <Message v-else class="has-background-info-90 has-text-dark mt-5" title="Loading Configuration"
+        icon="fas fa-spinner fa-spin">
+        <p>Loading application configuration. This usually takes less than a second.</p>
+        <p v-if="!socket.isConnected" class="mt-2">
+          If this is taking too long, please check that the backend server is running and that the WebSocket
+          connection is functional.
+        </p>
+      </Message>
     </div>
 
     <div class="columns mt-3 is-mobile">

ui/app/pages/browser/[...slug].vue

@@ -221,6 +221,14 @@ const table_container = ref<boolean>(false)
 const search = ref<string>('')
 const show_filter = ref<boolean>(false)
 
+watch(() => config.app.basic_mode, async v => {
+  if (!config.isLoaded() || !v) {
+    return
+  }
+  await navigateTo('/')
+},{ immediate: true })
+
+
 const filteredItems = computed<FileItem[]>(() => {
   if (!search.value) {
     return sortedItems(items.value)

ui/app/pages/conditions.vue

@@ -131,12 +131,12 @@ const initialLoad = ref(true)
 const addInProgress = ref(false)
 const remove_keys = ['in_progress', 'raw']
 
-watch(() => config.app.basic_mode, async () => {
+watch(() => config.app.basic_mode, async v => {
-  if (!config.app.basic_mode) {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo("/")
-})
+}, { immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {

ui/app/pages/console.vue

@@ -82,11 +82,11 @@ watch(() => isLoading.value, async value => {
 }, { immediate: true })
 
 watch(() => config.app.basic_mode, async () => {
-  if (!config.app.basic_mode) {
+  if (!config.isLoaded() || !config.app.basic_mode) {
     return
   }
   await navigateTo('/')
-})
+}, { immediate: true })
 
 watch(() => config.app.console_enabled, async () => {
   if (config.app.console_enabled) {

ui/app/pages/logs.vue

@@ -156,11 +156,11 @@ watch(toggleFilter, () => {
 });
 
 watch(() => config.app.basic_mode, async v => {
-  if (!v) {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-})
+}, { immediate: true })
 
 watch(() => config.app.file_logging, async v => {
   if (v) {

ui/app/pages/notifications.vue

@@ -223,12 +223,12 @@ const isLoading = ref(false)
 const initialLoad = ref(true)
 const addInProgress = ref(false)
 
-watch(() => config.app.basic_mode, async () => {
+watch(() => config.app.basic_mode, async v => {
-  if (!config.app.basic_mode) {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-})
+}, { immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {

ui/app/pages/presets.vue

@@ -226,15 +226,12 @@ const remove_keys = ['raw', 'toggle_description']
 
 const presetsNoDefault = computed(() => presets.value.filter((t) => !t.default))
 
-watch(
+watch(() => config.app.basic_mode, async v => {
-  () => config.app.basic_mode,
+  if (!config.isLoaded() || !v) {
-  async () => {
+    return
-    if (!config.app.basic_mode) {
+  }
-      return
+  await navigateTo('/')
-    }
+}, { immediate: true })
-    await navigateTo('/')
-  },
-)
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {

ui/app/pages/tasks.vue

@@ -423,12 +423,12 @@ watch(masterSelectAll, value => {
   }
 })
 
-watch(() => config.app.basic_mode, async () => {
+watch(() => config.app.basic_mode, async v => {
-  if (!config.app.basic_mode) {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-})
+},{ immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {