add ability to disable the progress transition to improve performance

CHANGELOG.md

@@ -1,6 +1,7 @@
 Added:
 - A spinning loader at startup while spotify is not ready (Can be disabled in settings)
 - The old search box in the top bar (Can be disabled in settings)
+- Ability to disable the progress transition to improve performance `Playbar > Progress Transition` (#118)
 
 Fixed:
 - Checking for update every 10 Minutes not working

src/js/main.js

@@ -146,18 +146,6 @@ Dribbblish.on("ready", () => {
         onChange: (val) => $("html").css("--sidebar-gap-right", `${val}px`)
     });
 
-    waitForElement([".main-nowPlayingBar-container"], ([container]) => {
-        Dribbblish.config.register({
-            area: "Playbar",
-            type: "checkbox",
-            key: "playbarShadow",
-            name: "Playbar Shadow",
-            description: "Add a shadow effect underneath the playbar",
-            defaultValue: true,
-            onChange: (val) => $(container).toggleClass("with-shadow", val)
-        });
-    });
-
     Dribbblish.config.register({
         type: "select",
         data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" },
@@ -168,6 +156,31 @@ Dribbblish.on("ready", () => {
         onChange: (val) => $("#main").attr("top-bar", val)
     });
 
+    waitForElement([".main-nowPlayingBar-container"], ([container]) => {
+        Dribbblish.config.register({
+            area: "Playbar",
+            type: "checkbox",
+            key: "playbarShadow",
+            name: "Shadow",
+            description: "Add a shadow effect underneath the playbar",
+            defaultValue: true,
+            onChange: (val) => $(container).toggleClass("with-shadow", val)
+        });
+    });
+
+    Dribbblish.config.register({
+        area: "Playbar",
+        type: "checkbox",
+        key: "playbarTransition",
+        name: "Progress Transition",
+        description: `
+            Have the player progress bar transition smoothly.
+            Turn this off if you're noticing high CPU utilization [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/118){.muted}
+        `,
+        defaultValue: true,
+        onChange: (val) => $("#main").attr("playbar-transition", val ? "" : null)
+    });
+
     Dribbblish.config.register({
         area: "Playbar",
         type: "select",

src/styles/main.scss

@@ -548,12 +548,14 @@ html.sidebar-hide-text .GlueDropTarget span {
     opacity: 1;
 }
 
-.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
+#main[playbar-transition] {
-    transition: transform var(--playbar-movement-anim-speed) ease;
+    .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
-}
+        transition: transform var(--playbar-movement-anim-speed) ease;
+    }
 
-.progress-bar:not(:active) .progress-bar__slider {
+    .progress-bar:not(:active) .progress-bar__slider {
-    transition-property: left, opacity;
+        transition-property: left, opacity;
+    }
 }
 
 .playback-bar .prog-tooltip {