From 7b477b8c5cda645668a8bda7cef843f111d68270 Mon Sep 17 00:00:00 2001
From: et-nik <nikita.hldm@gmail.com>
Date: Wed, 3 May 2023 15:04:54 +0200
Subject: [PATCH] waiting spinner before receiving the code

---
 src/components/modals/views/TextEditModal.vue | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/modals/views/TextEditModal.vue b/src/components/modals/views/TextEditModal.vue
index 6b062af..3e637d2 100644
--- a/src/components/modals/views/TextEditModal.vue
+++ b/src/components/modals/views/TextEditModal.vue
@@ -8,13 +8,20 @@
             <button type="button" class="btn-close" aria-label="Close" v-on:click="hideModal"></button>
         </div>
         <div class="modal-body">
-            <codemirror
-                ref="fmCodeEditor"
-                v-bind:value="code"
-                v-bind:options="cmOptions"
-                v-bind:height="editorHeight"
-                v-on:change="onChange"
-            />
+            <div v-if="codeLoaded">
+                <codemirror
+                    ref="fmCodeEditor"
+                    v-bind:value="code"
+                    v-bind:options="cmOptions"
+                    v-bind:height="editorHeight"
+                    v-on:change="onChange"
+                />
+            </div>
+            <div class="p-5" v-else :style="{ height: editorHeight + 'px' }">
+                <div class="d-flex justify-content-center">
+                    <div class="spinner-border spinner-border-big" role="status"></div>
+                </div>
+            </div>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-info" v-on:click="updateFile">
@@ -59,6 +66,7 @@ export default {
         return {
             code: '',
             editedCode: '',
+            codeLoaded: false,
         };
     },
     mounted() {
@@ -75,6 +83,11 @@ export default {
                 } else {
                     this.code = response.data;
                 }
+
+                this.codeLoaded = true;
+            })
+            .catch(() => {
+                this.hideModal();
             });
     },
     computed: {
@@ -158,4 +171,9 @@ export default {
         padding: 0;
     }
 }
+
+.spinner-border-big {
+    width: 3rem;
+    height: 3rem;
+}
 </style>