Fix flaky preferences test

frontend/src/pages/preferences.vue

@@ -7,6 +7,8 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { isFlagName } from "~/types/feature-flag"
 import { SWITCHABLE, ON, OFF } from "~/constants/feature-flag"
 
+import { useHydrating } from "~/composables/use-hydrating"
+
 import VContentPage from "~/components/VContentPage.vue"
 import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
 
@@ -50,6 +52,8 @@ const flagsBySwitchable = computed(() => {
 const featureGroups = computed(() => {
   return featureFlagStore.getFeatureGroups()
 })
+
+const doneHydrating = computed(() => useHydrating())
 </script>
 
 <template>
@@ -86,6 +90,7 @@ const featureGroups = computed(() => {
             class="flex-row items-center"
             :checked="flag.state === ON"
             is-switch
+            :disabled="!doneHydrating"
             @change="handleChange"
             >{{ $t(`prefPage.features.${flag.name}`) }}</VCheckbox
           >

frontend/test/playwright/e2e/preferences.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 
@@ -114,8 +114,12 @@ test.describe("switchable features", () => {
     }) => {
       await page.goto(`/preferences`)
       const featureFlag = await getSwitchableInput(page, name, checked)
+
       await featureFlag.click()
 
+      // Ensure the feature flag is updated
+      await getSwitchableInput(page, name, !checked)
+
       const storageCookie = { cookie: "features", session: "sessionFeatures" }[
         featureData.features[name as FlagName].storage as "cookie" | "session"
       ]