fix

src/components/ScreenPage.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router'
 import { getAuthClient } from '@/api/auth_client'
 import type { Game, ScreenState, TeamResult } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import { useSimplePolling } from '@/composables/useSimplePolling'
 import { applicationFileURL } from '@/utils/application'
 import { formatGameDateTime } from '@/utils/datetime'
 
@@ -33,10 +34,10 @@ const timerNow = ref(Date.now())
 const timerRemainingAtSync = ref(0)
 const timerSyncedAt = ref(Date.now())
 const timerStateAtSync = ref<string>()
+const pollingReady = ref(false)
 const introAudioElement = ref<HTMLAudioElement>()
 const conclusionVideoElement = ref<HTMLVideoElement>()
 let appliedCommandVersion = 0
-let pollTimer: number | null = null
 let timerTick: number | null = null
 
 const bindingFlow = computed(() => Boolean(route.query.screenID && route.query.accessToken))
@@ -149,6 +150,10 @@ async function loadGames() {
   }
 }
 
+useSimplePolling(() => {
+  if (pollingReady.value) void loadState()
+}, 1000)
+
 watch(state, async (value) => {
   if (!value || !value.command || value.stateVersion === appliedCommandVersion) return
   appliedCommandVersion = value.stateVersion || 0
@@ -209,7 +214,7 @@ onMounted(async () => {
   try {
     if (!screenId.value || !accessToken.value) await createSession()
     await loadState()
-    pollTimer = window.setInterval(loadState, 1000)
+    pollingReady.value = true
     timerTick = window.setInterval(() => {
       timerNow.value = Date.now()
     }, 250)
@@ -221,7 +226,6 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  if (pollTimer != null) window.clearInterval(pollTimer)
   if (timerTick != null) window.clearInterval(timerTick)
   if (resultsScrollTimer != null) window.clearInterval(resultsScrollTimer)
 })