Implemented handleEditorRefresh to handle editor refresh more

efficiently. Improved loading animation styles for performance. Closes #1066.
altair-graphql · Dec 26, 2019 · f836950 · f836950
1 parent 1461468
commit f836950
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 90 deletions.
diff --git a/packages/altair-electron/src/window.js b/packages/altair-electron/src/window.js
@@ -158,6 +158,7 @@ const createWindow = () => {
     protocol: 'altair:',
     slashes: true
   }));
+  // instance.loadURL('http://localhost:4200/');
 
   // Set the touchbar
   instance.setTouchBar(createTouchBar(actions));

diff --git a/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html b/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html
@@ -1,7 +1,7 @@
 <div class="app-doc-viewer" *ngIf="allowIntrospection">
   <div class="app-doc-loader" [ngClass]="{ 'show-loader': isLoading }">
       <div class="app-doc-loader-content">
-        <img src="assets/img/logo.svg" alt="" class="anim anim-rotate">
+        <img src="assets/img/logo.svg" alt="" class="anim" [ngClass]="{ 'anim-rotate': isLoading }">
         {{ 'LOADING_INDICATOR_TEXT' | translate }}
       </div>
     </div>

diff --git a/src/app/components/pre-request-editor/pre-request-editor.component.ts b/src/app/components/pre-request-editor/pre-request-editor.component.ts
@@ -6,7 +6,8 @@ import {
   Input,
   Output,
   ViewChild,
-  ElementRef
+  ElementRef,
+  DoCheck
 } from '@angular/core';
 
 // Import the codemirror packages
@@ -18,15 +19,16 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import 'codemirror/mode/javascript/javascript';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 @Component({
   selector: 'app-pre-request-editor',
   templateUrl: './pre-request-editor.component.html',
   styles: []
 })
-export class PreRequestEditorComponent implements OnChanges {
+export class PreRequestEditorComponent implements OnChanges, DoCheck {
 
   @Input() preRequest: any = {};
   @Output() preRequestScriptChange = new EventEmitter();
@@ -79,11 +81,12 @@ export class PreRequestEditorComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges() {
+  }
+
+  ngDoCheck() {
     // Refresh the query result editor view when there are any changes
     // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
   }
 
 }
diff --git a/src/app/components/query-editor/query-editor.component.ts b/src/app/components/query-editor/query-editor.component.ts
@@ -11,6 +11,7 @@ import {
   HostBinding,
   NgZone,
   ElementRef,
+  DoCheck,
 } from '@angular/core';
 
 import * as fromVariables from '../../reducers/variables/variables';
@@ -27,7 +28,7 @@ import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/search/search';
 import 'codemirror/addon/search/searchcursor';
@@ -47,6 +48,7 @@ import { GqlService, NotifyService } from 'app/services';
 import { debug } from 'app/utils/logger';
 import { onHasCompletion } from 'app/utils/codemirror/graphql-has-completion';
 import { GraphQLSchema } from 'graphql';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 const AUTOCOMPLETE_CHARS = /^[a-zA-Z0-9_@(]$/;
 
@@ -55,7 +57,7 @@ const AUTOCOMPLETE_CHARS = /^[a-zA-Z0-9_@(]$/;
   templateUrl: './query-editor.component.html',
   styleUrls: ['./query-editor.component.scss']
 })
-export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
+export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges, DoCheck {
 
   @Input() query = '';
   @Input() gqlSchema: GraphQLSchema;
@@ -177,12 +179,12 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
         `, 'Altair', { disableTimeOut: true });
       }
     }
+  }
 
+  ngDoCheck() {
     // Refresh the query result editor view when there are any changes
     // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
   }
 
   /**

diff --git a/src/app/components/query-result/query-result.component.ts b/src/app/components/query-result/query-result.component.ts
@@ -8,6 +8,7 @@ import {
   OnChanges,
   ElementRef,
   SimpleChanges,
+  DoCheck,
 } from '@angular/core';
 
 // Import the codemirror packages
@@ -18,7 +19,7 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/search/search';
 import 'codemirror/addon/search/searchcursor';
@@ -27,13 +28,14 @@ import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/scroll/annotatescrollbar';
 import 'codemirror-graphql/results/mode';
 import { SubscriptionResponse } from 'app/reducers/query/query';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 @Component({
   selector: 'app-query-result',
   templateUrl: './query-result.component.html',
   styleUrls: ['./query-result.component.scss']
 })
-export class QueryResultComponent implements OnChanges {
+export class QueryResultComponent implements OnChanges, DoCheck {
 
   @Input() queryResult = '';
   @Input() responseTime = 0;
@@ -75,11 +77,6 @@ export class QueryResultComponent implements OnChanges {
   constructor() {}
 
   ngOnChanges(changes: SimpleChanges) {
-    // Refresh the query result editor view when there are any changes
-    // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
     if (changes.subscriptionResponses && changes.subscriptionResponses.currentValue) {
       setTimeout(() => {
         if (this.subscriptionResponseList && this.autoscrollSubscriptionResponses) {
@@ -89,6 +86,12 @@ export class QueryResultComponent implements OnChanges {
     }
   }
 
+  ngDoCheck() {
+    // Refresh the query result editor view when there are any changes
+    // to fix any broken UI issues in it
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
+  }
+
   subscriptionResponseTrackBy(index: number, response: SubscriptionResponse) {
     return response.responseTime;
   }

diff --git a/src/app/components/settings-dialog/settings-dialog.component.ts b/src/app/components/settings-dialog/settings-dialog.component.ts
@@ -9,6 +9,7 @@ import {
   SimpleChanges,
   OnChanges,
   ElementRef,
+  DoCheck,
 } from '@angular/core';
 
 import * as fromSettings from '../../reducers/settings/settings';
@@ -25,10 +26,11 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import { registerSettingsLinter, getHint, validateSettings, settingsSchema } from 'app/utils/settings_addons';
 import { NotifyService, KeybinderService, StorageService } from 'app/services';
 import { KeyboardShortcutCategory } from 'app/services/keybinder/keybinder.service';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 registerSettingsLinter(Codemirror);
 
@@ -37,7 +39,7 @@ registerSettingsLinter(Codemirror);
   templateUrl: './settings-dialog.component.html',
   styleUrls: ['./settings-dialog.component.scss']
 })
-export class SettingsDialogComponent implements OnInit, AfterViewInit, OnChanges {
+export class SettingsDialogComponent implements OnInit, AfterViewInit, OnChanges, DoCheck {
 
   @Input() settings: fromSettings.State;
   @Input() appVersion: string;
@@ -100,11 +102,12 @@ export class SettingsDialogComponent implements OnInit, AfterViewInit, OnChanges
     if (changes && changes.settings && changes.settings.currentValue) {
       this.updateLocalSettings(JSON.stringify(changes.settings.currentValue, null, 2));
     }
+  }
+
+  ngDoCheck() {
     // Refresh the query result editor view when there are any changes
     // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
   }
 
   showHint(cm: any) {

diff --git a/src/app/components/subscription-url-dialog/subscription-url-dialog.component.ts b/src/app/components/subscription-url-dialog/subscription-url-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, OnChanges, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, OnChanges, ElementRef, DoCheck } from '@angular/core';
 
 
 // Import the codemirror packages
@@ -9,14 +9,15 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import 'codemirror/mode/javascript/javascript';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 @Component({
   selector: 'app-subscription-url-dialog',
   templateUrl: './subscription-url-dialog.component.html'
 })
-export class SubscriptionUrlDialogComponent implements OnChanges {
+export class SubscriptionUrlDialogComponent implements OnChanges, DoCheck {
 
   @Input() subscriptionUrl = '';
   @Input() subscriptionConnectionParams = '';
@@ -47,11 +48,12 @@ export class SubscriptionUrlDialogComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges() {
+  }
+
+  ngDoCheck() {
     // Refresh the query result editor view when there are any changes
     // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
   }
 
   subscriptionUrlInput(event: Event) {

diff --git a/src/app/components/variables-editor/variables-editor.component.ts b/src/app/components/variables-editor/variables-editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, ViewChild, EventEmitter, OnChanges, ElementRef } from '@angular/core';
+import { Component, Input, Output, ViewChild, EventEmitter, OnChanges, ElementRef, DoCheck } from '@angular/core';
 
 // Import the codemirror packages
 import * as Codemirror from 'codemirror';
@@ -8,15 +8,16 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/indent-fold';
-import 'codemirror/addon/display/autorefresh';
+// import 'codemirror/addon/display/autorefresh';
 import 'codemirror/mode/javascript/javascript';
+import { handleEditorRefresh } from 'app/utils/codemirror/refresh-editor';
 
 @Component({
   selector: 'app-variables-editor',
   templateUrl: './variables-editor.component.html',
   styleUrls: ['./variables-editor.component.scss']
 })
-export class VariablesEditorComponent implements OnChanges {
+export class VariablesEditorComponent implements OnChanges, DoCheck {
 
   @Input() variables = '';
   @Output() variablesChange = new EventEmitter();
@@ -39,11 +40,12 @@ export class VariablesEditorComponent implements OnChanges {
   constructor() { }
 
   ngOnChanges() {
+  }
+
+  ngDoCheck() {
     // Refresh the query result editor view when there are any changes
     // to fix any broken UI issues in it
-    if (this.editor && this.editor.codeMirror) {
-      this.editor.codeMirror.refresh();
-    }
+    handleEditorRefresh(this.editor && this.editor.codeMirror);
   }
 
 }
diff --git a/src/app/containers/window/window.component.html b/src/app/containers/window/window.component.html
@@ -5,7 +5,7 @@
 <div class="app-window__content">
   <div class="window-loader" [ngClass]="{ 'window-loader--show': isLoading$ | async }">
     <div class="window-loader__content">
-      <img src="assets/img/logo.svg" alt="" class="anim anim-rotate"> {{ 'LOADING_INDICATOR_TEXT' | translate }}
+      <img src="assets/img/logo.svg" alt="" class="loader-img anim" [ngClass]="{ 'anim-rotate': isLoading$ | async }"> {{ 'LOADING_INDICATOR_TEXT' | translate }}
       <div class="window-loader__actions">
         <button class="app-button cancel-request-button" (click)="cancelRequest()" track-id="cancel_request">{{ 'CANCEL_TEXT' | translate }}</button>
       </div>
@@ -134,12 +134,6 @@
         </div>
       </ng-template>
     </nz-modal>
-    <!-- <app-set-variable-dialog
-      [variables]="variables$ | async"
-      [showVariableDialog]="showVariableDialog"
-      (toggleVariableDialog)="toggleVariableDialog($event)"
-      (variablesChange)="updateVariables($event)"
-    ></app-set-variable-dialog> -->
     <app-subscription-url-dialog
       [subscriptionUrl]="subscriptionUrl"
       [subscriptionConnectionParams]="subscriptionConnectionParams"

diff --git a/src/app/utils/codemirror/refresh-editor.ts b/src/app/utils/codemirror/refresh-editor.ts
@@ -0,0 +1,10 @@
+export const handleEditorRefresh = (cm: any) => {
+  if (cm) {
+    if (cm.display.wrapper.offsetHeight) {
+      if (cm.display.lastWrapHeight !== cm.display.wrapper.clientHeight) {
+        console.log('changes', cm);
+        cm.refresh();
+      }
+    }
+  }
+};