perf: use skeleton with extension detail button

Postcatlab · Aug 11, 2022 · aa3546b · aa3546b
1 parent fb40e3c
commit aa3546b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.html b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.html
@@ -9,10 +9,8 @@
   </div>
   <section class="h-full p-4 max-w-[80vw] mx-auto">
     <div class="flex">
-      <i
-        class="block w-24 h-24 mr-8 bg-center bg-no-repeat bg-cover border rounded-lg bd_all"
-        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"
-      ></i>
+      <i class="block w-24 h-24 mr-8 bg-center bg-no-repeat bg-cover border rounded-lg bd_all"
+        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"></i>
       <div class="flex flex-col flex-1">
         <div class="flex flex-col">
           <span class="mb-2 text-xl font-bold">{{ extensionDetail?.moduleName }}</span>
@@ -36,18 +34,13 @@ <h2 class="text-lg font-bold" i18n>Intro</h2>
       <div class="shrink-0 w-[200px] 2xl:w-[250px] overflow-auto h-full">
         <h2 class="text-lg font-bold" i18n>Install</h2>
         <div class="flex items-center mt-[22px]" *ngIf="!extensionDetail?.installed">
-          <button
-            *ngIf="isElectron"
-            nz-button
-            nzType="primary"
-            nzBlock
-            nzSize="large"
-            [nzLoading]="isOperating"
-            (click)="manageExtension('install', extensionDetail?.name)"
-            i18n
-          >
+          <nz-skeleton-element *ngIf="isNotLoaded" nzType="button" nzSize="large" [nzActive]="true" style="width:100%">
+          </nz-skeleton-element>
+          <button *ngIf="isElectron && !isNotLoaded" nz-button nzType="primary" nzBlock nzSize="large"
+            [nzLoading]="isOperating" (click)="manageExtension('install', extensionDetail?.name)" i18n>
             Install
           </button>
+
           <div *ngIf="!isElectron">
             <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="download" class="!w-full" i18n>
               Download Client
@@ -65,20 +58,15 @@ <h2 class="text-lg font-bold" i18n>Install</h2>
             </div>
           </div>
         </div>
-        <button
-          *ngIf="extensionDetail?.installed"
-          nz-button
-          nzBlock
-          nzType="primary"
-          nzDanger
-          nzSize="large"
-          [nzLoading]="isOperating"
-          class="mt-[12px]"
-          (click)="manageExtension('uninstall', extensionDetail?.name)"
-          i18n
-        >
-          Uninstall
-        </button>
+        <div *ngIf="extensionDetail?.installed">
+          <nz-skeleton-element *ngIf="isNotLoaded" nzType="button" [nzActive]="true" nzSize="large" style="width:100%">
+          </nz-skeleton-element>
+          <button *ngIf="!isNotLoaded" nz-button nzBlock nzType="primary" nzDanger nzSize="large"
+            [nzLoading]="isOperating" class="mt-[12px]" (click)="manageExtension('uninstall', extensionDetail?.name)"
+            i18n>
+            Uninstall
+          </button>
+        </div>
 
         <h2 class="text-lg font-bold mt-[30px]" i18n>Support</h2>
         <nz-descriptions [nzColumn]="1" nzTitle="">

diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss
@@ -3,6 +3,9 @@
     .ant-tabs-content-holder {
       padding-top: 20px;
     }
+    .ant-skeleton-element .ant-skeleton-button {
+      width: 100%;
+    }
   }
   .md-preview {
     img {
@@ -13,7 +16,7 @@
     .markdown-desc {
       overflow: auto;
     }
-  
+
     .ant-descriptions-row > td {
       padding-bottom: 8px;
     }
@@ -22,4 +25,4 @@
       color: #999;
     }
   }
-}
+}
diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.ts b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.ts
@@ -14,6 +14,7 @@ import { LanguageService } from 'eo/workbench/browser/src/app/core/services/lang
 export class ExtensionDetailComponent implements OnInit {
   isOperating = false;
   introLoading = false;
+  isNotLoaded = true;
   extensionDetail: EoExtensionInfo;
   resourceInfo = ResourceInfo;
   get isElectron() {
@@ -37,6 +38,7 @@ export class ExtensionDetailComponent implements OnInit {
     if (!this.extensionDetail?.installed) {
       await this.fetchReadme(this.language.systemLanguage);
     }
+    this.isNotLoaded = false;
     this.extensionDetail.introduction ||= $localize`This plugin has no documentation yet.`;
   }