fix(sidebar): disable frame CSS transition while user is resizing the sidebar to prevent janky animations

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.5.0',
+  version: '3.5.1',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-frame.ts

@@ -22,6 +22,9 @@ export class WccFrame extends DeesElement {
   @property({ type: Number })
   accessor sidebarWidth: number = 200;
 
+  @property({ type: Boolean })
+  accessor isResizing: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -59,7 +62,7 @@ export class WccFrame extends DeesElement {
             border: 10px solid #ffaeaf;
             left: ${this.sidebarWidth}px;
           `}
-          transition: all 0.3s ease;
+          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
           ${this.isNative ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':

ts_web/elements/wcc-sidebar.ts

@@ -768,6 +768,11 @@ export class WccSidebar extends DeesElement {
     const frame = this.dashboardRef?.shadowRoot?.querySelector('wcc-frame') as any;
     const properties = this.dashboardRef?.shadowRoot?.querySelector('wcc-properties') as any;
 
+    // Disable frame transition during resize
+    if (frame) {
+      frame.isResizing = true;
+    }
+
     const onMouseMove = (e: MouseEvent) => {
       const newWidth = Math.min(400, Math.max(150, startWidth + (e.clientX - startX)));
       this.sidebarWidth = newWidth;
@@ -784,6 +789,10 @@ export class WccSidebar extends DeesElement {
       this.isResizing = false;
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
+      // Re-enable frame transition
+      if (frame) {
+        frame.isResizing = false;
+      }
       // Dispatch event on release for URL persistence
       this.dispatchEvent(new CustomEvent('widthChanged', { detail: this.sidebarWidth }));
     };