perf: update detail tab page loading

src/layout/components/GenericDetailPage/index.vue

@@ -1,6 +1,5 @@
 <template>
   <TabPage
-    v-if="!loading"
     :active-menu.sync="iActiveMenu"
     :submenu="iSubmenu"
     :title="iTitle"
@@ -12,7 +11,9 @@
         <ActionsGroup slot="headingRightSide" :actions="pageActions" class="header-buttons" />
       </span>
     </template>
+    <div v-if="!loading">
       <slot />
+    </div>
   </TabPage>
 </template>
 

src/layout/components/TabPage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Page v-if="!loading" :title="title" class="tab-page" v-bind="$attrs">
+  <Page :title="title" class="tab-page" v-bind="$attrs">
     <template #headingRightSide>
       <slot name="headingRightSide" />
     </template>
@@ -45,7 +45,7 @@
         <el-alert v-if="helpMessage" type="success">
           <span v-sanitize="helpMessage" class="announcement-main" />
         </el-alert>
-        <transition appear mode="out-in" name="fade-transform">
+        <transition v-if="!loading" appear mode="out-in" name="fade-transform">
           <slot>
             <keep-alive>
               <component :is="computeActiveComponent" />

src/styles/index.scss

@@ -702,3 +702,7 @@ li.rmenu i.fa {
 div.el-loading-parent--relative {
   min-height: 150px;
 }
+
+.el-drawer__header .drawer-title {
+  color: var(--color-text-primary);
+}