Fix issue: 165: Disable Animations (#406)

* Fix issue: 165: Disable Animations

* refactor: use setIntervalImmediately with 1000ms timer for animation toggle

* refactor: simplify CSS and run prettier formatting

* fix: animations disabled on first launch despite setting being off

Fixed an issue where animations were disabled when the application
first launched, even though the 'Disable Animations' setting was
turned off in the config.

The problem occurred because the animation state check only ran when
there was a change in the setting. On first launch, since the value
remained false (animations enabled), the comparison would be:
  lastAnimationState (false) !== currentState (false) = false

This meant updateAnimationClass() was never called initially, leaving
animations disabled by default.

Solution: Initialize lastAnimationState as undefined instead of reading
from config. This ensures the first check always triggers:
  lastAnimationState (undefined) !== currentState (false) = true

Now animations are correctly enabled on first launch and can be toggled
by the user in settings as intended.

Resolves #165

Author: enXov

src/renderer/App.vue

@@ -149,13 +149,14 @@
 import { RouterLink, useRoute, useRouter } from "vue-router";
 import { routes } from "./router";
 import { Icon } from "@iconify/vue";
-import { onMounted, ref, useTemplateRef, watch } from "vue";
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { isInstalled } from "./lib/install";
 import { Winboat } from "./lib/winboat";
 import { openAnchorLink } from "./utils/openLink";
 import { WinboatConfig } from "./lib/config";
 import { USBManager } from "./lib/usbmanager";
 import { GUEST_NOVNC_PORT } from "./lib/constants";
+import { setIntervalImmediately } from "./utils/interval";
 const { BrowserWindow }: typeof import("@electron/remote") = require("@electron/remote");
 const os: typeof import("os") = require("os");
 const path: typeof import("path") = require("path");
@@ -173,6 +174,7 @@ const MANUAL_UPDATE_TIMEOUT = 60000; // 60 seconds
 const updateDialog = useTemplateRef("updateDialog");
 const rerenderCounter = ref(0); // TODO: Hack for non-reactive data
 const novncURL = ref("");
+let animationCheckInterval: NodeJS.Timeout | null = null;
 
 onMounted(async () => {
     const winboatInstalled = await isInstalled();
@@ -186,6 +188,30 @@ onMounted(async () => {
         $router.push("/home");
     }
 
+    // Apply or remove disable-animations class based on config
+    const updateAnimationClass = () => {
+        if (wbConfig?.config.disableAnimations) {
+            document.body.classList.add("disable-animations");
+            console.log("Animations disabled");
+        } else {
+            document.body.classList.remove("disable-animations");
+            console.log("Animations enabled");
+        }
+    };
+
+    // Poll for config changes since the Proxy doesn't trigger Vue reactivity
+    // This is similar to how rerenderCounter is used elsewhere in the codebase
+    // Start with undefined so that the first call will always apply the current state
+    let lastAnimationState: boolean | undefined = undefined;
+    animationCheckInterval = setIntervalImmediately(() => {
+        const currentState = wbConfig?.config.disableAnimations;
+        if (currentState !== lastAnimationState) {
+            lastAnimationState = currentState;
+            updateAnimationClass();
+            rerenderCounter.value++; // Force re-render to update transitions
+        }
+    }, 1000); // Check every 1000ms
+
     // Watch for guest server updates and show dialog
     watch(
         () => winboat?.isUpdatingGuestServer.value,
@@ -209,6 +235,13 @@ onMounted(async () => {
     );
 });
 
+onUnmounted(() => {
+    // Clean up the interval when component unmounts
+    if (animationCheckInterval) {
+        clearInterval(animationCheckInterval);
+    }
+});
+
 function handleMinimize() {
     console.log("Minimize");
     window.electronAPI.minimizeWindow();
@@ -296,4 +329,40 @@ dialog::backdrop {
     );
     -webkit-mask-image: -webkit-gradient(linear, left 0%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
 }
+
+/* Disable all animations when the setting is enabled */
+body.disable-animations,
+body.disable-animations *,
+body.disable-animations *::before,
+body.disable-animations *::after {
+    animation: none !important;
+    transition: none !important;
+}
+
+/* Specifically disable Vue transition components */
+body.disable-animations .fade-enter-active,
+body.disable-animations .fade-leave-active,
+body.disable-animations .devices-move,
+body.disable-animations .devices-enter-active,
+body.disable-animations .devices-leave-active,
+body.disable-animations .menu-move,
+body.disable-animations .menu-enter-active,
+body.disable-animations .menu-leave-active,
+body.disable-animations .apps-move,
+body.disable-animations .apps-enter-active,
+body.disable-animations .apps-leave-active,
+body.disable-animations .bounce-enter-active,
+body.disable-animations .bounce-leave-active,
+body.disable-animations .bouncedown-enter-active,
+body.disable-animations .bouncedown-leave-active,
+body.disable-animations .bounce-in,
+body.disable-animations .bouncedown-in {
+    transition: none !important;
+    animation: none !important;
+}
+
+/* Disable keyframe animations */
+body.disable-animations .blob-anim {
+    animation: none !important;
+}
 </style>

src/renderer/lib/config.ts

@@ -21,6 +21,7 @@ export type WinboatConfigObj = {
     advancedFeatures: boolean;
     multiMonitor: number;
     rdpArgs: RdpArg[];
+    disableAnimations: boolean;
 };
 
 const defaultConfig: WinboatConfigObj = {
@@ -34,6 +35,7 @@ const defaultConfig: WinboatConfigObj = {
     advancedFeatures: false,
     multiMonitor: 0,
     rdpArgs: [],
+    disableAnimations: false,
 };
 
 export class WinboatConfig {

src/renderer/views/Config.vue

@@ -512,6 +512,31 @@
                         ></x-switch>
                     </div>
                 </x-card>
+
+                <!-- Disable Animations -->
+                <x-card
+                    class="flex flex-row justify-between items-center p-2 py-3 my-0 w-full backdrop-blur-xl backdrop-brightness-150 bg-neutral-800/20"
+                >
+                    <div>
+                        <div class="flex flex-row gap-2 items-center mb-2">
+                            <Icon class="inline-flex text-violet-400 size-8" icon="mdi:animation-outline"></Icon>
+                            <h1 class="my-0 text-lg font-semibold">Disable Animations</h1>
+                        </div>
+                        <p class="text-neutral-400 text-[0.9rem] !pt-0 !mt-0">
+                            If enabled, all animations in the UI will be disabled (useful when GPU acceleration isn't
+                            working well)
+                        </p>
+                    </div>
+                    <div class="flex flex-row gap-2 justify-center items-center">
+                        <x-switch
+                            :toggled="wbConfig.config.disableAnimations"
+                            @toggle="
+                                (_: any) => (wbConfig.config.disableAnimations = !wbConfig.config.disableAnimations)
+                            "
+                            size="large"
+                        ></x-switch>
+                    </div>
+                </x-card>
             </div>
         </div>