Improve loading animation when switching release details (#2367)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+apps-releases/release-details.tsx

@@ -58,32 +58,35 @@ export class ReleaseDetails extends Component<Props> {
   @observable details: IReleaseDetails;
   @observable values = "";
   @observable valuesLoading = false;
-  @observable userSuppliedOnly = false;
+  @observable showOnlyUserSuppliedValues = false;
   @observable saving = false;
   @observable releaseSecret: Secret;
 
-  @disposeOnUnmount
-  releaseSelector = reaction(() => this.props.release, release => {
-    if (!release) return;
-    this.loadDetails();
-    this.loadValues();
-    this.releaseSecret = null;
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.props.release, release => {
+        if (!release) return;
+        this.loadDetails();
+        this.loadValues();
+        this.releaseSecret = null;
+      }),
+      reaction(() => secretsStore.getItems(), () => {
+        if (!this.props.release) return;
+        const { getReleaseSecret } = releaseStore;
+        const { release } = this.props;
+        const secret = getReleaseSecret(release);
+
+        if (this.releaseSecret) {
+          if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
+          this.loadDetails();
+        }
+        this.releaseSecret = secret;
+      }),
+      reaction(() => this.showOnlyUserSuppliedValues, () => {
+        this.loadValues();
+      }),
+    ]);
   }
-  );
-
-  @disposeOnUnmount
-  secretWatcher = reaction(() => secretsStore.getItems(), () => {
-    if (!this.props.release) return;
-    const { getReleaseSecret } = releaseStore;
-    const { release } = this.props;
-    const secret = getReleaseSecret(release);
-
-    if (this.releaseSecret) {
-      if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
-      this.loadDetails();
-    }
-    this.releaseSecret = secret;
-  });
 
   constructor(props: Props) {
     super(props);
@@ -100,10 +103,15 @@ export class ReleaseDetails extends Component<Props> {
   async loadValues() {
     const { release } = this.props;
 
-    this.values = "";
-    this.valuesLoading = true;
-    this.values = (await getReleaseValues(release.getName(), release.getNs(), !this.userSuppliedOnly)) ?? "";
-    this.valuesLoading = false;
+    try {
+      this.valuesLoading = true;
+      this.values = (await getReleaseValues(release.getName(), release.getNs(), !this.showOnlyUserSuppliedValues)) ?? "";
+    } catch (error) {
+      Notifications.error(`Failed to load values for ${release.getName()}: ${error}`);
+      this.values = "";
+    } finally {
+      this.valuesLoading = false;
+    }
   }
 
   updateValues = async () => {
@@ -146,21 +154,19 @@ export class ReleaseDetails extends Component<Props> {
         <div className="flex column gaps">
           <Checkbox
             label="User-supplied values only"
-            value={this.userSuppliedOnly}
-            onChange={values => {
-              this.userSuppliedOnly = values;
-              this.loadValues();
-            }}
+            value={this.showOnlyUserSuppliedValues}
+            onChange={value => this.showOnlyUserSuppliedValues = value}
             disabled={valuesLoading}
           />
-          {valuesLoading
-            ? <Spinner />
-            : <AceEditor
-              mode="yaml"
-              value={values}
-              onChange={values => this.values = values}
-            />
-          }
+          <AceEditor
+            mode="yaml"
+            value={values}
+            onChange={text => this.values = text}
+            className={cssNames({ loading: valuesLoading })}
+            readOnly={valuesLoading || this.showOnlyUserSuppliedValues}
+          >
+            {valuesLoading && <Spinner center />}
+          </AceEditor>
           <Button
             primary
             label="Save"

src/renderer/components/ace-editor/ace-editor.scss

@@ -30,6 +30,19 @@
     border: 1px solid gainsboro;
   }
 
+  &.loading {
+    pointer-events: none;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: transparentize(white, .85);
+    }
+  }
+
   > .editor {
     position: absolute;
     width: inherit;
@@ -76,4 +89,4 @@
   .ace_comment {
     color: var(--dockEditorComment);
   }
-}
+}

src/renderer/components/ace-editor/ace-editor.tsx

@@ -169,11 +169,12 @@ export class AceEditor extends React.Component<Props, State> {
   }
 
   render() {
-    const { className, hidden } = this.props;
+    const { className, hidden, children } = this.props;
 
     return (
       <div className={cssNames("AceEditor", className, { hidden })}>
         <div className="editor" ref={e => this.elem = e}/>
+        {children}
       </div>
     );
   }