loading

src/subpages/colexiu/index.module.less

@@ -50,16 +50,16 @@
   }
 }
 .skeleton {
-  padding-top: 20px;
-  margin: auto;
-  :global(.van-skeleton__content) {
-    > div {
-      margin-top: 10px;
-    }
-    > div,
-    > h3 {
-      margin-left: auto;
-      margin-right: auto;
+  :global{
+    .van-skeleton__content{
+      .van-skeleton__title,
+      .van-skeleton__row{
+        margin: 10px auto;
+        height: 16px;
+      }
+      .van-skeleton__row{
+        width: 80% !important;
+      }
     }
   }
 }

src/subpages/colexiu/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch,nextTick } from 'vue'
+import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch, nextTick } from 'vue'
 import MusicSheet from '/src/music-sheet'
 import store from 'store'
 // import { throttle } from 'lodash'
@@ -172,7 +172,7 @@ export default defineComponent({
       const saveSpeed = (store.get('speeds') || {})[search.id as string]
       const bpm = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM
 
-      detailState.activeSpeed = saveSpeed ||detail.value.playSpeed || bpm || 100
+      detailState.activeSpeed = saveSpeed || detail.value.playSpeed || bpm || 100
       detailState.baseSpeed = saveSpeed || detail.value.playSpeed || bpm || 100
       detailState.code = detail.value?.code || ''
       detailState.activeDetail.originalSpeed = detailState.baseSpeed
@@ -197,14 +197,14 @@ export default defineComponent({
               bpm: osmd?.Sheet?.userStartTempoInBPM || (osmd as any)?.bpm,
               numerator,
               denominator,
-              scoreSize: SettingState.sett.scoreSize || 'middle'
+              scoreSize: SettingState.sett.scoreSize || 'middle',
             },
             times: detailState.times,
           })
           // console.log('生成缓存数据', musicJSON)
-          musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || '';
+          musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
           nextTick(() => {
-            musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || '';
+            musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
             musicJSON.rended = true
             productRef.value?.autoProduct()
           })
@@ -223,7 +223,7 @@ export default defineComponent({
       // }
       // console.timeEnd('循环引用')
       console.log('🚀 ~ detailState.times', detailState.times)
-      
+
       const songEndTime = detailState.times[detailState.times.length - 1 || 0]?.endtime || 0
       if (detailState.isAppPlay) {
         const durationNum = songEndTime
@@ -276,7 +276,6 @@ export default defineComponent({
       })
       renderError.value = true
       renderLoading.value = false
-
     }
 
     //给app传伴奏
@@ -334,18 +333,12 @@ export default defineComponent({
                 : '',
             }}
           >
-            {loading && !error && <Skeleton class={styles.skeleton} rowWidth="80%" title row={3} />}
+            <div class={styles.headTitle}>{detail.value.musicSheetName}</div>
+            <Skeleton class={styles.skeleton} rowWidth="80%" title loading={detailStatus.value === 'loading'} />
+            <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value && !error} />
             {error && <Empty />}
             {score.value && fingeringInited && (
               <>
-                <div
-                  style={{
-                    width: musicSheetStyle.width,
-                  }}
-                  class={["van-ellipsis", styles.headTitle]}
-                >
-                  {detail.value.musicSheetName}
-                </div>
                 <MusicSheet
                   ref={MusicSheetRef}
                   style={musicSheetStyle}