diff --git a/gui/src/components/widgets/OverlayWidget.tsx b/gui/src/components/widgets/OverlayWidget.tsx
index 6fa84268ec..fb010339da 100644
--- a/gui/src/components/widgets/OverlayWidget.tsx
+++ b/gui/src/components/widgets/OverlayWidget.tsx
@@ -1,18 +1,19 @@
-import { useEffect } from 'react';
+import { useLocalization } from '@fluent/react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { KeyValuesT, MessageT, Payload, Topic } from 'solarxr-protocol';
 import {
   OVERLAY_DISPLAY_SETTINGS_TOPIC,
   PayloadData,
-  usePubSub,
+  usePubSub
 } from '../../hooks/pubSub';
 import { CheckBox } from '../commons/Checkbox';
-import { useLocalization } from '@fluent/react';
 import { Typography } from '../commons/Typography';
 
 export function OverlayWidget() {
   const { l10n } = useLocalization();
   const { publish, subscribe, keyValues } = usePubSub();
+  const [loading, setLoading] = useState(true);
   const { reset, control, handleSubmit, watch } = useForm<{
     isVisible: boolean;
     isMirrored: boolean;
@@ -26,6 +27,7 @@ export function OverlayWidget() {
   subscribe(
     OVERLAY_DISPLAY_SETTINGS_TOPIC,
     (payload: PayloadData, type: Payload) => {
+      setLoading(false);
       if (type !== Payload.KeyValues) throw new Error('Invalid payload');
       const obj = keyValues(payload);
       reset({
@@ -63,7 +65,7 @@ export function OverlayWidget() {
     publish(message);
   };
 
-  return (
+  return !loading ? (
     <form className="bg-background-60 flex flex-col w-full rounded-md px-2">
       <div className="mt-2 px-1">
         <Typography color="secondary">
@@ -83,5 +85,7 @@ export function OverlayWidget() {
         label={l10n.getString('widget-overlay-is_mirrored_label')}
       ></CheckBox>
     </form>
+  ) : (
+    <></>
   );
 }