diff --git a/src/components/SubtitleDialog.vue b/src/components/SubtitleDialog.vue
index ffbcec3..c679e0d 100644
--- a/src/components/SubtitleDialog.vue
+++ b/src/components/SubtitleDialog.vue
@@ -96,16 +96,20 @@
             </q-item>
 
             <q-separator inset />
-
             <q-item style="height: 50vh">
-              <q-item-section>
+              <q-item-section
+                :style="{
+                  'align-items': loading ? 'center' : 'unset',
+                }"
+              >
                 <editor
-                  :disabled="loading"
+                  v-if="!loading"
                   class="fit"
                   tinymce-script-src="tinymce/tinymce.min.js"
                   :init="editor_config"
                   v-model="subtitle.text"
                 />
+                <q-spinner v-else color="primary" size="5em" :thickness="2" />
               </q-item-section>
             </q-item>
           </q-list>
@@ -217,11 +221,11 @@ export default defineComponent({
           if (response) {
             subtitle.value = response.subtitle;
           }
-          loading.value = false;
         } catch (e) {
           console.log(e);
           show_dialog.value = false;
         }
+        loading.value = false;
       },
       onShow() {
         document.querySelectorAll(".tox ").forEach((item) => {
@@ -251,7 +255,6 @@ export default defineComponent({
           });
           show_dialog.value = false;
         } catch {}
-        loading.value = false;
       },
     };
   },