fix: Service worker loop (#32)

Author: dmtrKovalenko

src/Main.tsx

@@ -8,7 +8,18 @@ import { ErrorBoundary } from "./ErrorBoundary";
 import { registerSW } from "virtual:pwa-register";
 import * as Sentry from "@sentry/react";
 
-registerSW({ immediate: false });
+// Only register service worker in production
+if (import.meta.env.PROD) {
+  registerSW({ 
+    immediate: false,
+    onRegisteredSW(swUrl, _registration) {
+      console.log('SW registered:', swUrl);
+    },
+    onRegisterError(error) {
+      console.error('SW registration error:', error);
+    }
+  });
+}
 
 Sentry.init({
   dsn: "https://[email protected]/4508197084725248",

src/ui/Progress.tsx

@@ -12,8 +12,11 @@ export function Progress({ progress, name }: ProgressDemoProps) {
       value={progress}
     >
       <RadixProgress.Indicator
-        className="bg-white w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
-        style={{ transform: `translateX(-${100 - progress}%)` }}
+        className="bg-white h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65,0,0.35,1)]"
+        style={{ 
+          width: '100%',
+          transform: `translateX(-${100 - progress}%)` 
+        }}
       />
       <span className="absolute top-0.5 left-4 mix-blend-exclusion">
         {name}

vite.config.ts

@@ -1,14 +1,12 @@
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
 import react from "@vitejs/plugin-react";
-import path from "path";
 
 const ReactCompilerConfig = {
   target: "19",
 };
 
-// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     react({
       include: ["**/*.res.mjs", "**/*.tsx", "**/*.ts"],
@@ -18,11 +16,11 @@ export default defineConfig({
     }),
     VitePWA({
       registerType: "autoUpdate",
-      injectRegister: "auto",
+      injectRegister: mode === "production" ? "auto" : false,
       workbox: {
         maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
         globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2,ttf}"],
       },
     }),
   ],
-});
+}));