Merge pull request #4413 from paulkaplan/improve-meter-paint-perf

Move the mask on the audio meter outside the SVG for repaint performance

src/components/meter/meter.css

@@ -1,3 +1,5 @@
+@import "../../css/colors.css";
+
 .green {
     fill: rgb(171, 220, 170);
     stroke: rgb(174, 211, 168);
@@ -12,3 +14,19 @@
     fill: rgb(251, 194, 142);
     stroke: rgb(235, 189, 142);
 }
+
+.mask-container {
+    position: relative;
+}
+
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transform-origin: top;
+    will-change: transform;
+    background: $ui-primary;
+    opacity: 0.75;
+}

src/components/meter/meter.jsx

@@ -20,36 +20,40 @@ const Meter = props => {
     const barHeight = (height - (barSpacing * (nBars + 1))) / nBars;
 
     const nBarsToMask = nBars - Math.floor(level * nBars);
+    const scale = ((nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)) / height;
 
     return (
-        <svg
-            className={styles.container}
-            height={height}
-            width={width}
+        <div
+            className={styles.maskContainer}
+            style={{height: `${height}px`}}
         >
-            {Array(nBars).fill(0)
-                .map((value, index) => (
-                    <rect
-                        className={index < nGreen ? styles.green :
-                            (index < nGreen + nYellow ? styles.yellow : styles.red)}
-                        height={barHeight}
-                        key={index}
-                        rx={barRounding}
-                        ry={barRounding}
-                        width={width - 2}
-                        x={1}
-                        y={height - ((barSpacing + barHeight) * (index + 1))}
-                    />
-                ))}
-            <rect
-                fill="hsla(215, 100%, 95%, 1)"
-                height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)}
-                opacity="0.75"
+            <svg
+                className={styles.container}
+                height={height}
                 width={width}
-                x={0}
-                y={0}
+            >
+                {Array(nBars).fill(0)
+                    .map((value, index) => (
+                        <rect
+                            className={index < nGreen ? styles.green :
+                                (index < nGreen + nYellow ? styles.yellow : styles.red)}
+                            height={barHeight}
+                            key={index}
+                            rx={barRounding}
+                            ry={barRounding}
+                            width={width - 2}
+                            x={1}
+                            y={height - ((barSpacing + barHeight) * (index + 1))}
+                        />
+                    ))}
+            </svg>
+            <div
+                className={styles.mask}
+                style={{
+                    transform: `scaleY(${scale})`
+                }}
             />
-        </svg>
+        </div>
     );
 };