Merge pull request #607 from uploadcare/fix/cloud-editor-glitches

fix(cloud-image-editor): weird ui glitches when updating `cdnUrl` on change
uploadcare · Feb 15, 2024 · 3b00343 · 3b00343
2 parents 9a763e6 + c264c64
commit 3b00343
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
@@ -84,26 +84,33 @@ export class CloudImageEditorBlock extends CloudImageEditorBase {
     }
     await this._waitForSize();
 
-    if (this.$['*tabId'] === TabId.CROP) {
-      this.$['*cropperEl'].deactivate({ reset: true });
-    } else {
-      this.$['*faderEl'].deactivate();
-    }
-
-    this.$['*editorTransformations'] = {};
-
     if (this.$.cdnUrl) {
-      let uuid = extractUuid(this.$.cdnUrl);
-      this.$['*originalUrl'] = createOriginalUrl(this.$.cdnUrl, uuid);
-      let operations = extractOperations(this.$.cdnUrl);
-      let transformations = operationsToTransformations(operations);
+      const uuid = extractUuid(this.$.cdnUrl);
+      const originalUrl = createOriginalUrl(this.$.cdnUrl, uuid);
+      if (originalUrl === this.$['*originalUrl']) {
+        return;
+      }
+      this.$['*originalUrl'] = originalUrl;
+      const operations = extractOperations(this.$.cdnUrl);
+      const transformations = operationsToTransformations(operations);
       this.$['*editorTransformations'] = transformations;
     } else if (this.$.uuid) {
-      this.$['*originalUrl'] = createOriginalUrl(this.cfg.cdnCname, this.$.uuid);
+      const originalUrl = createOriginalUrl(this.cfg.cdnCname, this.$.uuid);
+      if (originalUrl === this.$['*originalUrl']) {
+        return;
+      }
+      this.$['*originalUrl'] = originalUrl;
+      this.$['*editorTransformations'] = {};
     } else {
       throw new Error('No UUID nor CDN URL provided');
     }
 
+    if (this.$['*tabId'] === TabId.CROP) {
+      this.$['*cropperEl'].deactivate({ reset: true });
+    } else {
+      this.$['*faderEl'].deactivate();
+    }
+
     try {
       const cdnUrl = createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json'));
       const json = await fetch(cdnUrl).then((response) => response.json());

diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css
@@ -140,7 +140,6 @@
   height: 100%;
   overflow: hidden;
   overflow-y: auto;
-  transition: 0.3s;
 }
 
 @media only screen and (max-width: 800px) {