perf: adjust monaco editor style

Postcatlab · Aug 5, 2022 · 660e894 · 660e894
1 parent 0ca0f54
commit 660e894
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/...er/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.scss b/...er/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.scss
@@ -3,6 +3,6 @@
 }
 :host ::ng-deep {
   .ant-code-editor {
-    height: calc(var(--bottom-height) - 156px);
+    height: calc(var(--bottom-height) - 128px);
   }
 }
diff --git a/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html b/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html
@@ -7,7 +7,7 @@
 </div>
 <div class="p15" *ngIf="(model | json) !== '{}'">
   <!-- Status Bar -->
-  <div *ngIf="model.statusCode"
+  <div *ngIf="model?.statusCode"
     class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}">
     <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
     <div class="f_row_ac fs12">

diff --git a/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.scss b/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.scss
@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
+  // overflow: hidden;
   border: 1px solid var(--BORDER);
 }
 .button_list {

diff --git a/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts b/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts
@@ -117,9 +117,13 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       this.resizeObserver = new ResizeObserver(
         debounce(() => {
           if (this.el.offsetParent) {
-            this?.rerenderEditor();
+            this.el.style.setProperty('overflow', 'hidden');
+            requestAnimationFrame(() => {
+              this?.rerenderEditor();
+              this.el.style.removeProperty('overflow');
+            });
           }
-        }, 150)
+        }, 600)
       );
       this.resizeObserver.observe(this.el);
     }

diff --git a/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.ts b/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.ts
@@ -57,7 +57,7 @@ export class SplitPanelComponent implements OnInit, OnDestroy, AfterViewInit {
   ngOnDestroy(): void {}
 
   updateTopAndBottomCssVar() {
-    requestIdleCallback(() => {
+    requestAnimationFrame(() => {
       this.topHeight = getComputedStyle(this.scalableRef.nativeElement).height;
       this.bottomHeight = getComputedStyle(this.bottomRef.nativeElement).height;
     });