From 528631f152b9b67c452aa52c5c311d5c1ac82759 Mon Sep 17 00:00:00 2001
From: MeloAlright <meloalright@gmail.com>
Date: Sat, 17 Aug 2024 13:23:43 +0800
Subject: [PATCH] Live demo (#42)

* feat: add progress in vue playground

* feat: add 600 delay
---
 vue-playground/package.json | 1 +
 vue-playground/src/App.vue  | 9 ++++++++-
 vue-playground/src/main.ts  | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/vue-playground/package.json b/vue-playground/package.json
index ad9573d3..c1973e56 100644
--- a/vue-playground/package.json
+++ b/vue-playground/package.json
@@ -14,6 +14,7 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
+    "vue3-progress": "0.0.1-beta4",
     "vue-skia": "workspace:*"
   },
   "devDependencies": {
diff --git a/vue-playground/src/App.vue b/vue-playground/src/App.vue
index 6105bbe9..6d34288c 100644
--- a/vue-playground/src/App.vue
+++ b/vue-playground/src/App.vue
@@ -1,4 +1,5 @@
 <template>
+  <vue3-progress />
   <main v-if="!loading" style="text-align: center">
     <template v-if="true">
       <h1>Vue Skia</h1>
@@ -19,6 +20,7 @@
         </div>
         <VueLive
           :editorProps="{ lineNumbers: true }"
+          :delay="600"
           :code="!loading && !debug ? code : LoadingCode"
           :layout="CustomLayout"
           :components="{
@@ -113,6 +115,7 @@ import code from "./code";
 import LoadingCode from "./loading-code";
 import "vue-live/style.css";
 import "prism-themes/themes/prism-night-owl.css";
+
 export default defineComponent({
   name: "App",
   components: {
@@ -159,11 +162,15 @@ export default defineComponent({
       }
 
       this.loading = false;
+      (this as unknown as { $progress: { start: () => void; finish: () => void } }).$progress.finish();
     });
   },
+  created() {
+    (this as unknown as { $progress: { start: () => void; finish: () => void } }).$progress.start();
+  },
   methods: {
     input(event: any) {
-      this.code = event.target._value;
+      // this.code = event.target._value;
     },
     copy() {
       try {
diff --git a/vue-playground/src/main.ts b/vue-playground/src/main.ts
index d2a4e3fd..4d64d91d 100644
--- a/vue-playground/src/main.ts
+++ b/vue-playground/src/main.ts
@@ -1,7 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import { VueSkia } from 'vue-skia'
+import Vue3Progress from "vue3-progress";
 
 const app = createApp(App);
 app.use(VueSkia);
+app.use(Vue3Progress, {
+    position: "fixed",
+    color: "rgb(0, 161, 132)",
+  })
 app.mount("#app");