Improve rendering performance

packages/frontend-core/src/components/sheet/ScrollOverlay.svelte

@@ -94,14 +94,14 @@
 {#if showVScrollbar}
   <div
     class="v-scrollbar"
-    style="--top:{barTop}px; height:{barHeight}px;"
+    style="top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
   />
 {/if}
 {#if showHScrollbar}
   <div
     class="h-scrollbar"
-    style="--left:{barLeft}px; width:{barWidth}px;"
+    style="left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
   />
 {/if}
@@ -119,15 +119,11 @@
     opacity: 0.9;
   }
   .v-scrollbar {
-    top: var(--top);
-    height: var(--height);
     right: 4px;
     width: 8px;
   }
   .h-scrollbar {
     bottom: 4px;
     height: 8px;
-    width: var(--width);
-    left: var(--left);
   }
 </style>

packages/frontend-core/src/components/sheet/SheetCell.svelte

@@ -7,7 +7,7 @@
   export let selected = false
   export let reorderSource = false
   export let reorderTarget = false
-  export let width
+  export let width = ""
 </script>
 
 <div
@@ -23,7 +23,7 @@
   on:focus
   on:click
   on:mousedown
-  style="--width:{width}px;"
+  style="flex: 0 0 {width}px;"
 >
   <slot />
 </div>
@@ -42,7 +42,6 @@
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
-    flex: 0 0 var(--width);
     position: relative;
     width: 0;
   }

packages/frontend-core/src/components/sheet/SheetRow.svelte

@@ -33,7 +33,6 @@
       reorderTarget={$reorder.targetColumn === column.name}
       on:click={() => ($selectedCellId = cellIdx)}
       width={column.width}
-      left={column.left}
     >
       <svelte:component
         this={getCellRenderer(column)}

packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import { domDebounce } from "../../utils/utils"
 
   const {
     cellHeight,
@@ -20,8 +21,13 @@
   $: hiddenWidths = calculateHiddenWidths($visibleColumns)
   $: scrollLeft = $scroll.left
   $: scrollTop = $scroll.top
-  $: offsetX = scrollHorizontally ? -1 * scrollLeft + hiddenWidths : 0
+  $: style = generateStyle($scroll, hiddenWidths)
-  $: offsetY = scrollVertically ? -1 * (scrollTop % cellHeight) : 0
+
+  const generateStyle = (scroll, hiddenWidths) => {
+    const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
+    const offsetY = scrollVertically ? -1 * (scroll.top % cellHeight) : 0
+    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+  }
 
   // Calculates with total width of all columns currently not rendered
   const calculateHiddenWidths = visibleColumns => {
@@ -38,13 +44,15 @@
   // Handles a wheel even and updates the scroll offsets
   const handleWheel = e => {
     e.preventDefault()
-
+    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+  }
+  const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
     // Calculate new scroll top
-    let newScrollTop = scrollTop + e.deltaY
+    let newScrollTop = scrollTop + deltaY
     newScrollTop = Math.max(0, Math.min(newScrollTop, $maxScrollTop))
 
     // Calculate new scroll left
-    let newScrollLeft = scrollLeft + e.deltaX
+    let newScrollLeft = scrollLeft + deltaX
     newScrollLeft = Math.max(0, Math.min(newScrollLeft, $maxScrollLeft))
 
     // Update state
@@ -54,14 +62,14 @@
     })
 
     // Hover row under cursor
-    const y = e.clientY - $bounds.top + (newScrollTop % cellHeight)
+    const y = clientY - $bounds.top + (newScrollTop % cellHeight)
     const hoveredRow = $visibleRows[Math.floor(y / cellHeight)]
     $hoveredRowId = hoveredRow?._id
-  }
+  })
 </script>
 
 <div class="outer" on:wheel={wheelInteractive ? handleWheel : null}>
-  <div class="inner" style="--offset-x:{offsetX}px;--offset-y:{offsetY}px;">
+  <div {style}>
     <slot />
   </div>
 </div>
@@ -71,7 +79,4 @@
     min-width: 100%;
     min-height: 100%;
   }
-  .inner {
-    transform: translate3d(var(--offset-x), var(--offset-y), 0);
-  }
 </style>

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -57,7 +57,7 @@
 >
   <div class="header row">
     <!-- Field headers -->
-    <SheetCell header label on:click={selectAll} width="40" left="0">
+    <SheetCell header label on:click={selectAll} width="40">
       <Checkbox value={rowCount && selectedRowCount === rowCount} />
     </SheetCell>
 
@@ -66,7 +66,6 @@
         header
         sticky
         width={$stickyColumn.width}
-        left={$stickyColumn.left}
         reorderTarget={$reorder.targetColumn === $stickyColumn.name}
       >
         <Icon
@@ -111,7 +110,6 @@
               selected={$selectedCellId === cellIdx}
               on:click={() => ($selectedCellId = cellIdx)}
               width={$stickyColumn.width}
-              left="40"
               reorderTarget={$reorder.targetColumn === $stickyColumn.name}
             >
               <svelte:component