Merge pull request #13085 from overleaf/mj-figure-rt-flicker

[cm6+rt] Reduce flickering of rendered figure

GitOrigin-RevId: a88845621228fa3a78ced023d5b5480ed600256a

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/editable-graphics.ts

@@ -49,9 +49,6 @@ export class EditableGraphicsWidget extends GraphicsWidget {
   renderGraphic(element: HTMLElement, view: EditorView) {
     super.renderGraphic(element, view)
     if (this.figureData) {
-      if (this.figureData.width) {
-        element.dataset.width = this.figureData.width.toString()
-      }
       const button = this.createEditButton(view)
       element.prepend(button)
     }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/graphics.ts

@@ -48,6 +48,12 @@ export class GraphicsWidget extends WidgetType {
   updateDOM(element: HTMLImageElement, view: EditorView) {
     this.destroyed = false
     element.classList.toggle('ol-cm-environment-centered', this.centered)
+    if (
+      this.filePath === element.dataset.filepath &&
+      element.dataset.width === this.figureData?.width?.toString()
+    ) {
+      return true
+    }
     this.renderGraphic(element, view)
     return true
   }
@@ -76,7 +82,7 @@ export class GraphicsWidget extends WidgetType {
 
     const preview = this.getPreviewByPath(this.filePath)
     element.dataset.filepath = this.filePath
-    element.dataset.width = undefined
+    element.dataset.width = this.figureData?.width?.toString()
 
     if (!preview) {
       const message = document.createElement('div')