From ddd7f7755131088205d6f0669766932574fad845 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Mon, 10 Nov 2025 16:43:13 +0300
Subject: [PATCH] [FIX] Show loading screen while waiting for modal text
 content.

---
 ui/app/components/GetInfo.vue   |  3 +--
 ui/app/components/ModalText.vue | 21 +++++++++++++--------
 ui/app/layouts/default.vue      | 11 ++++++++---
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/app/components/GetInfo.vue b/ui/app/components/GetInfo.vue
index 67b9006f..9269f982 100644
--- a/ui/app/components/GetInfo.vue
+++ b/ui/app/components/GetInfo.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
   code_classes?: string
 }>()
 
-const isLoading = ref<boolean>(false)
+const isLoading = ref<boolean>(true)
 const data = ref<any>({})
 
 onMounted(async (): Promise<void> => {
@@ -35,7 +35,6 @@ onMounted(async (): Promise<void> => {
   }
 
   try {
-    isLoading.value = true
     const response = await request(url)
     const body = await response.text()
 
diff --git a/ui/app/components/ModalText.vue b/ui/app/components/ModalText.vue
index 008981da..530095ec 100644
--- a/ui/app/components/ModalText.vue
+++ b/ui/app/components/ModalText.vue
@@ -31,14 +31,19 @@ code {
     </div>
     <div class="modal-content-max" style="height: 80vh;" v-else>
       <div class="content p-0 m-0" style="position: relative">
-        <pre :class="[code_classes, custom_classes]"><code class="p-4 is-block" v-text="data" /></pre>
-        <div class="m-4 is-flex" style="position: absolute; top:0; right:0;">
-          <button class="button is-small is-purple mr-3" @click="() => toggleClass('is-pre-wrap-force')">
-            <span class="icon"><i class="fas fa-text-width" /></span>
-          </button>
-          <button class="button is-info is-small" @click="() => copyText(JSON.stringify(data, null, 2))">
-            <span class="icon"><i class="fas fa-copy" /></span>
-          </button>
+        <div style="font-size:30vh; width: 99%" class="has-text-centered" v-if="isLoading">
+          <i class="fas fa-circle-notch fa-spin" />
+        </div>
+        <div v-else>
+          <pre :class="[code_classes, custom_classes]"><code class="p-4 is-block" v-text="data" /></pre>
+          <div class="m-4 is-flex" style="position: absolute; top:0; right:0;">
+            <button class="button is-small is-purple mr-3" @click="() => toggleClass('is-pre-wrap-force')">
+              <span class="icon"><i class="fas fa-text-width" /></span>
+            </button>
+            <button class="button is-info is-small" @click="() => copyText(JSON.stringify(data, null, 2))">
+              <span class="icon"><i class="fas fa-copy" /></span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index b3dac08c..8413251f 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -39,7 +39,7 @@
 
         <div class="navbar-brand pl-5">
           <NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
-            v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
+            v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'" id="top">
             <span class="is-text-overflow">
               <span class="icon">
                 <i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
@@ -172,15 +172,19 @@
         <div class="column">
           <div class="has-text-left" v-if="config.app?.app_version">
             © {{ Year }} - <NuxtLink href="https://github.com/ArabCoders/ytptube" target="_blank">YTPTube</NuxtLink>
-            <span class="has-tooltip"
+            (<span class="has-tooltip"
               v-tooltip="`Build Date: ${config.app?.app_build_date}, Branch: ${config.app?.app_branch}, commit: ${config.app?.app_commit_sha}`">
-              &nbsp;({{ config?.app?.app_version || 'unknown' }})</span>
+              {{ config?.app?.app_version || 'unknown' }}</span>)
             - <NuxtLink target="_blank" href="https://github.com/yt-dlp/yt-dlp">yt-dlp</NuxtLink>
             <span>&nbsp;({{ config?.app?.ytdlp_version || 'unknown' }})</span>
             - <NuxtLink to="/changelog">CHANGELOG</NuxtLink>
             - <NuxtLink @click="doc.file = '/api/docs/FAQ.md'">FAQ</NuxtLink>
             - <NuxtLink @click="doc.file = '/api/docs/README.md'">README</NuxtLink>
             - <NuxtLink @click="doc.file = '/api/docs/API.md'">API</NuxtLink>
+            - <NuxtLink @click="scrollToTop">
+                <span class="icon"><i class="fas fa-arrow-up" /></span>
+                <span>Top</span>
+            </NuxtLink>
           </div>
         </div>
         <div class="column is-narrow" v-if="config.app?.started">
@@ -507,4 +511,5 @@ const connectionStatusColor = computed(() => {
   }
 })
 
+const scrollToTop = () => document.getElementById('top')?.scrollIntoView({ behavior: 'smooth' });
 </script>