From e9bca0efc33b102532bcb625f98743efde9d6a2f Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sun, 21 Nov 2021 01:52:20 +0800
Subject: [PATCH] feat: add loading for live editor

---
 components/OneDemo.vue |  3 ++-
 components/OneRepl.vue | 30 ++++++++++++++++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index 9708e44..b62f17c 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -91,6 +91,7 @@ import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
 import { play } from '../common/play'
 import OneEditLink from './OneEditLink'
+import OneRepl from './OneRepl'
 
 export default {
   name: 'one-demo',
@@ -102,7 +103,7 @@ export default {
     'veui-icon': Icon,
     BrowserWindow,
     OneEditLink,
-    OneRepl: () => import('./OneRepl')
+    OneRepl
   },
   mixins: [i18n],
   props: {
diff --git a/components/OneRepl.vue b/components/OneRepl.vue
index 946092f..d1d9ef6 100644
--- a/components/OneRepl.vue
+++ b/components/OneRepl.vue
@@ -19,15 +19,28 @@
 </template>
 
 <script>
-import { Button } from 'veui'
+import { Button, Loading } from 'veui'
 import i18n from 'veui/mixins/i18n'
-import OneLive from './OneLive.vue'
 
 export default {
   name: 'one-repl',
   components: {
     'veui-button': Button,
-    'one-live': OneLive
+    'one-live': () => ({
+      component: import('./OneLive'),
+      loading: {
+        inheritAttrs: false,
+        render (h) {
+          return h(Loading, {
+            props: {
+              loading: true,
+              ui: 'strong'
+            },
+            class: 'loading'
+          })
+        }
+      }
+    })
   },
   mixins: [i18n],
   props: {
@@ -46,6 +59,7 @@ export default {
 
 <style lang="stylus" scoped>
 .repl
+  position relative
   display flex
   flex-direction column
 
@@ -68,7 +82,8 @@ export default {
     justify-content flex-end
     flex 1 1 auto
 
-.editor
+.editor:not(.loading)
+  position relative
   flex 1 1 auto
   height calc(100vh - 48px)
 
@@ -101,4 +116,11 @@ export default {
 
   & >>> .VueLive-error
     display none
+
+.loading
+  position absolute
+  top 40vh
+  left 50%
+  transform translateX(-50%)
+  font-size 40px
 </style>