From f21fee96a33d8dea3a5deb137651ec70cb752023 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 22 Aug 2025 17:47:59 +0300
Subject: [PATCH] refactor: update basic mode watch logic to check config
 loading state

---
 ui/app/components/History.vue      |  2 +-
 ui/app/components/NewDownload.vue  |  3 ++-
 ui/app/layouts/default.vue         | 10 +++++++++-
 ui/app/pages/browser/[...slug].vue |  8 ++++++++
 ui/app/pages/conditions.vue        |  6 +++---
 ui/app/pages/console.vue           |  4 ++--
 ui/app/pages/logs.vue              |  4 ++--
 ui/app/pages/notifications.vue     |  6 +++---
 ui/app/pages/presets.vue           | 15 ++++++---------
 ui/app/pages/tasks.vue             |  6 +++---
 10 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue
index 73e056fb..02601d8f 100644
--- a/ui/app/components/History.vue
+++ b/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">
diff --git a/ui/app/components/NewDownload.vue b/ui/app/components/NewDownload.vue
index 4521ef55..53ed1eb6 100644
--- a/ui/app/components/NewDownload.vue
+++ b/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>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index 0b8e5a3c..492b5307 100644
--- a/ui/app/layouts/default.vue
+++ b/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">
diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index c70ac7a0..f1e06e18 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/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)
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index 97fa328e..64cf6964 100644
--- a/ui/app/pages/conditions.vue
+++ b/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 () => {
-  if (!config.app.basic_mode) {
+watch(() => config.app.basic_mode, async v => {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo("/")
-})
+}, { immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {
diff --git a/ui/app/pages/console.vue b/ui/app/pages/console.vue
index 466849a9..de8309e8 100644
--- a/ui/app/pages/console.vue
+++ b/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) {
diff --git a/ui/app/pages/logs.vue b/ui/app/pages/logs.vue
index 3950f042..a61c22d1 100644
--- a/ui/app/pages/logs.vue
+++ b/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) {
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index cbcf0638..a7325da6 100644
--- a/ui/app/pages/notifications.vue
+++ b/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 () => {
-  if (!config.app.basic_mode) {
+watch(() => config.app.basic_mode, async v => {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-})
+}, { immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index 6600dcca..a66dec20 100644
--- a/ui/app/pages/presets.vue
+++ b/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(
-  () => config.app.basic_mode,
-  async () => {
-    if (!config.app.basic_mode) {
-      return
-    }
-    await navigateTo('/')
-  },
-)
+watch(() => config.app.basic_mode, async v => {
+  if (!config.isLoaded() || !v) {
+    return
+  }
+  await navigateTo('/')
+}, { immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index 4ced6601..f7b21fb4 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -423,12 +423,12 @@ watch(masterSelectAll, value => {
   }
 })
 
-watch(() => config.app.basic_mode, async () => {
-  if (!config.app.basic_mode) {
+watch(() => config.app.basic_mode, async v => {
+  if (!config.isLoaded() || !v) {
     return
   }
   await navigateTo('/')
-})
+},{ immediate: true })
 
 watch(() => socket.isConnected, async () => {
   if (socket.isConnected && initialLoad.value) {