refs #228 Fix loading circle in sidebar

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -2,10 +2,13 @@
 <transition name="slide-detail">
   <div id="side_bar" v-if="openSideBar">
     <div class="header">
+      <i class="el-icon-loading" v-show="loading"></i>
       <i class="el-icon-close" @click="close"></i>
     </div>
-    <account-profile v-if="component === 1"></account-profile>
-    <toot-detail v-if="component === 2"></toot-detail>
+    <div class="scrollable">
+      <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
+      <toot-detail v-if="component === 2"></toot-detail>
+    </div>
   </div>
 </transition>
 </template>
@@ -21,6 +24,11 @@ export default {
     TootDetail,
     AccountProfile
   },
+  data () {
+    return {
+      loading: false
+    }
+  },
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@@ -33,6 +41,9 @@ export default {
   methods: {
     close () {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
+    },
+    changeLoading (value) {
+      this.loading = value
     }
   }
 }
@@ -45,7 +56,6 @@ export default {
   right: 0;
   width: 320px;
   height: calc(100% - 48px);
-  overflow: auto;
   border-left: solid 1px var(--theme-border-color);
 
   .header {
@@ -54,11 +64,18 @@ export default {
     border-top: solid 1px var(--theme-border-color);
     border-bottom: solid 1px var(--theme-border-color);
     text-align: right;
+    height: 30px;
+    box-sizing: border-box;
 
     .el-icon-close {
       cursor: pointer;
     }
   }
+
+  .scrollable {
+    overflow: auto;
+    height: calc(100% - 30px);
+  }
 }
 
 .slide-detail-enter-active, .slide-detail-leave-active {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -112,6 +112,9 @@ export default {
   watch: {
     account: function () {
       this.activeTab = 1
+    },
+    loading: function (newState, oldState) {
+      this.$emit('change-loading', newState)
     }
   },
   methods: {
@@ -171,8 +174,6 @@ function findLink (target) {
 
 <style lang="scss" scoped>
 #account_profile {
-  height: 100%;
-
   .header-background {
     background-position: 50% 50%;
     background-size: cover;