On enable slider, turn on animation after it has been set to its save…

…d value.

src/popup.css

@@ -9,7 +9,11 @@
 }
 
 .ob-enable-span {
-  @apply m-1.5 relative w-16 h-8 bg-gray-200 rounded-full after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all;
+  @apply m-1.5 relative w-16 h-8 bg-gray-200 rounded-full after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7;
+}
+
+.ob-enable-span-transition {
+  @apply after:transition-all;
 }
 
 .ob-button-link {

src/popup.ts

@@ -4,10 +4,15 @@ import "./popup.css"
 console.debug("OpenBlur popup script loaded")
 
 const checkbox = document.getElementById("enabled") as HTMLInputElement
+const checkboxSpan = document.getElementById("enabled-span") as HTMLInputElement
 chrome.storage.sync.get(null, (data) => {
   console.debug("OpenBlur got data from storage", data)
   const config = data as StoredConfig
   checkbox.checked = !(config.mode?.id === "off")
+  // Once we set the checkbox to its initial value, enable transition animation for it
+  setTimeout(() => {
+    checkboxSpan.classList.add("ob-enable-span-transition")
+  }, 500)
   const mode = config.mode ?? MODES[1]
   void chrome.action.setIcon({ path: MODES[mode.index].icon })
   const literals: string[] = config.literals ?? []

static/popup.html

@@ -6,6 +6,7 @@
     <label class="ob-center cursor-pointer">
       <input id="enabled" type="checkbox" class="ob-enable-input peer" />
       <span
+        id="enabled-span"
         class="ob-enable-span peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white peer-checked:bg-blue-600"
       ></span>
     </label>

webpack.common.ts

@@ -10,7 +10,7 @@ const config: Configuration = {
     popup: "./src/popup.ts",
   },
   resolve: {
-    extensions: [".ts", ".css"],
+    extensions: [".ts"],
   },
   module: {
     rules: [