diff --git a/components/data/DataTimesTop.vue b/components/data/DataTimesTop.vue
index 8761693..ec411ba 100644
--- a/components/data/DataTimesTop.vue
+++ b/components/data/DataTimesTop.vue
@@ -17,14 +17,23 @@ interface TopHots{
     searchUrl: string
   }
 }
-const rawData:TopHots[] = await $fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
-const data:TopHots[] = []
-rawData.forEach(d=>{
-  let newD= d;
-  let aDate = new Date(Date.parse(d.lastTime))
-  newD.lastTime=aDate.toLocaleString()
-  data.push(newD)
-})
+
+const rawData = reactive<TopHots[]>([])
+const loading = ref(true)
+
+$fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
+    .then((dataRaw)=>{
+      let data = dataRaw  as unknown as TopHots[]
+      data.forEach(d=>{
+        let newD= d;
+        let aDate = new Date(Date.parse(d.lastTime))
+        newD.lastTime=aDate.toLocaleString()
+        rawData.push(newD)
+      })
+      loading.value = false
+    })
+
+
 const router = useRouter()
 const gotoWeb = (row, column, cell, event)=>{
   // console.log(row.fromWeb.searchUrl+row.word)
@@ -34,7 +43,7 @@ const gotoWeb = (row, column, cell, event)=>{
 
 <template>
       <client-only>
-        <el-table :data="data" style="width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
+        <el-table v-loading="loading" :data="rawData" style="min-height: 200px;width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
           <el-table-column prop="word" :label="props.fromWeb+' 持久热搜'" width="180" />
           <el-table-column prop="lastTime" label="最后上榜" width="180" />
           <el-table-column prop="times" label="上榜次数" />