fix: #1 invalid v-loading

Author: hehehai

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arco-vue-playground",
-  "version": "1.9.0",
+  "version": "1.0.0",
   "description": "Arco Vue Playground",
   "keywords": [
     "arco-vue",

src/App.vue

@@ -91,22 +91,21 @@ watchEffect(() => history.replaceState({}, '', `#${store.serialize()}`))
 </script>
 
 <template>
-  <div v-if="!loading" class="antialiased">
+  <div class="antialiased">
     <Header :store="store" />
-    <Repl
-      ref="repl"
-      :store="store"
-      show-compile-output
-      auto-resize
-      :sfc-options="sfcOptions"
-      :clear-console="false"
-      :show-import-map="store.userOptions.value.showHidden || false"
-      @keydown="handleKeydown"
-    />
+    <a-spin :loading="loading" tip="Loading ..." class="w-full">
+      <Repl
+        ref="repl"
+        :store="store"
+        show-compile-output
+        auto-resize
+        :sfc-options="sfcOptions"
+        :clear-console="false"
+        :show-import-map="store.userOptions.value.showHidden || false"
+        @keydown="handleKeydown"
+      />
+    </a-spin>
   </div>
-  <template v-else>
-    <div v-loading="{ text: 'Loading...' }" class="loading" />
-  </template>
 </template>
 
 <style>

src/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
     AOption: typeof import('@arco-design/web-vue')['Option']
     ASelect: typeof import('@arco-design/web-vue')['Select']
     ASpace: typeof import('@arco-design/web-vue')['Space']
+    ASpin: typeof import('@arco-design/web-vue')['Spin']
     Header: typeof import('./components/Header.vue')['default']
   }
 }