improvement: 加载数据时显示加载中而非显示暂无数据

src/components/DiscussionArea.vue

@@ -5,7 +5,10 @@
     <div class="discussion-area-content">
       <write-new-comment @comment-submit="handleCommentSubmit" :placeholder="writingAreaPlaceholder"></write-new-comment>
       <div class="sub-title mb-8">本页讨论区</div>
-      <div class="no-content-warning" v-if="comments === null || comments.length === 0">
+      <div class="no-content-warning" v-if="comments === null">
+        <div class="no-content-warning-tip">加载中...</div>
+      </div>
+      <div class="no-content-warning" v-else-if="comments.length === 0">
         本页还没有讨论
       </div>
       <template v-for="comment of comments">

src/components/SlideCard.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
-    <div class="slide-card-title"><span class="icon">{{iconMap['slide_show']}}</span>
-      {{ slide.name }}
-      <span class="tag">{{slideStateTranslation[slide.state]}}</span>
+  <transition>
+    <div>
+      <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
+        <div class="slide-card-title"><span class="icon">{{iconMap['slide_show']}}</span>
+          {{ slide.name }}
+          <span class="tag">{{slideStateTranslation[slide.state]}}</span>
+        </div>
+        <div class="slide-card-time">最近更新：{{ updateTime }}</div>
+        <div class="slide-card-course">所属课程：{{ slide.courseName }}</div>
+        <div class="slide-card-teacher">教师：{{ slide.teacherName }}</div>
+      </div>
     </div>
-    <div class="slide-card-time">最近更新：{{ updateTime }}</div>
-    <div class="slide-card-course">所属课程：{{ slide.courseName }}</div>
-    <div class="slide-card-teacher">教师：{{ slide.teacherName }}</div>
-  </div>
+  </transition>
 </template>
 
 <script>

src/views/student/tabs/StudentCoursesManager.vue

@@ -21,7 +21,10 @@
         </div>
       </template>
       <div class="sub-title">我的课程</div>
-      <div v-if="!courses || courses.length === 0" class="no-content-warning">
+      <div class="no-content-warning" v-if="courses === null">
+        <div class="no-content-warning-tip">加载中...</div>
+      </div>
+      <div v-else-if="courses.length === 0" class="no-content-warning">
         您还没有加入任何课程<br>
         在上方输入关键字搜索吧～
       </div>

src/views/student/tabs/StudentExplore.vue

@@ -5,7 +5,10 @@
 <!--      <search-bar placeholder="输入关键词搜索课件"  class="mb-24"></search-bar>-->
       <section>
         <h1 class="sub-title mb-24">按课程查找课件</h1>
-        <div v-if="!courses || courses.length === 0" class="no-content-warning">
+        <div class="no-content-warning" v-if="courses === null">
+          <div class="no-content-warning-tip">加载中...</div>
+        </div>
+        <div v-else-if="courses.length === 0" class="no-content-warning">
           <div class="no-content-warning-tip">
             您还没有加入任何课程
           </div>
@@ -31,7 +34,7 @@ export default {
   components: { CButton, CourseCard },
   data () {
     return {
-      courses: []
+      courses: null
     }
   },
   mounted () {

src/views/teacher/components/TeacherCourseSlides.vue

@@ -2,7 +2,10 @@
   <tab-side-component>
     <back-title>{{'软件工程与计算 I'}}</back-title>
     <div class="sub-title">课件列表</div>
-    <div class="no-content-warning" v-if="!slides || slides.length === 0">
+    <div class="no-content-warning" v-if="slides === null">
+      <div class="no-content-warning-tip">加载中...</div>
+    </div>
+    <div class="no-content-warning" v-else-if="slides.length === 0">
       <div class="no-content-warning-tip">本课程尚无课件～</div>
       <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课件</c-button>
     </div>
@@ -27,7 +30,7 @@ export default {
   components: { CButton, SlideCard, BackTitle, TabSideComponent },
   data () {
     return {
-      slides: []
+      slides: null
     }
   },
   watch: {

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -3,7 +3,10 @@
     <div class="left">
       <h1 class="title">课程管理</h1>
       <div class="sub-title">开设的课程</div>
-      <div class="no-content-warning" v-if="!courses || courses.length === 0">
+      <div class="no-content-warning" v-if="courses === null">
+        <div class="no-content-warning-tip">加载中...</div>
+      </div>
+      <div class="no-content-warning" v-else-if="courses.length === 0">
         <div class="no-content-warning-tip">你还没有过开设课程～</div>
       </div>
       <template v-for="(course, index) of courses">
@@ -26,7 +29,7 @@ export default {
   components: { CButton, CourseCard },
   data () {
     return {
-      courses: []
+      courses: null
     }
   },
   mounted () {

src/views/teacher/tabs/TeacherExplore.vue

@@ -5,8 +5,11 @@
 <!--      <search-bar></search-bar>-->
       <section>
         <h1 class="sub-title">最近编辑</h1>
-        <div class="no-content-warning" v-if="!slides || slides.length === 0">
-          <div class="no-content-warning-tip">无最近浏览记录～</div>
+        <div class="no-content-warning" v-if="slides === null">
+          <div class="no-content-warning-tip">加载中...</div>
+        </div>
+        <div class="no-content-warning" v-else-if="slides.length === 0">
+          <div class="no-content-warning-tip">无最近编辑记录～</div>
         </div>
         <template v-for="slide of slides">
           <slide-card :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
@@ -15,7 +18,10 @@
       </section>
       <section>
         <h1 class="sub-title">课程列表</h1>
-        <div class="no-content-warning" v-if="!courses || courses.length === 0">
+        <div class="no-content-warning" v-if="courses === null">
+          <div class="no-content-warning-tip">加载中...</div>
+        </div>
+        <div class="no-content-warning" v-else-if="courses.length === 0">
           <div class="no-content-warning-tip">你还没有过开设课程～</div>
           <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课程</c-button>
         </div>
@@ -42,8 +48,8 @@ export default {
   components: { CButton, CourseCard, SlideCard },
   data () {
     return {
-      courses: [],
-      slides: []
+      courses: null,
+      slides: null
     }
   },
   watch: {