fix: ActiveRundownView doesn't keep being dark

Author: jstarpl

meteor/client/ui/ActiveRundownView.tsx

@@ -31,8 +31,6 @@ export function ActiveRundownView({ studioId }: Readonly<{ studioId: StudioId }>
 		[studioId]
 	)
 
-	useSetDocumentClass('dark', 'vertical-overflow-only')
-
 	if (!subsReady) {
 		return (
 			<div className="rundown-view rundown-view--loading">
@@ -62,6 +60,8 @@ export function ActiveRundownView({ studioId }: Readonly<{ studioId: StudioId }>
 function NotFoundMessage({ message }: Readonly<{ message: string }>) {
 	const { t } = useTranslation()
 
+	useSetDocumentClass('dark', 'vertical-overflow-only')
+
 	return (
 		<div className="rundown-view rundown-view--unpublished">
 			<div className="rundown-view__label">

meteor/client/ui/util/useSetDocumentClass.ts

@@ -1,11 +1,11 @@
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
 /**
  * Adds the provided classes to `document.body` upon mount, and removes them when unmounted
  * @param classNames Classnames to add
  */
 export function useSetDocumentClass(...classNames: string[]): void {
-	useEffect(() => {
+	useLayoutEffect(() => {
 		document.body.classList.add(...classNames)
 
 		return () => {