diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index 05837a5e5..09445ace2 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -24,6 +24,7 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
const customDateFormat = options.customDateFormat;
const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
const time = useCurrentTime(options);
+ const zonedTime = time === null ? null : dayjs(time).tz(timezone);
const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
const showWeatherCorner = options.showWeather && sizing !== "xs";
@@ -44,15 +45,11 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
)}
- {options.customTimeFormat
- ? dayjs(time).tz(timezone).format(customTimeFormat)
- : dayjs(time).tz(timezone).format(timeFormat)}
+ {zonedTime === null ? "--:--" : zonedTime.format(options.customTimeFormat ? customTimeFormat : timeFormat)}
{options.showDate && (
- {options.customDateFormat
- ? dayjs(time).tz(timezone).format(customDateFormat)
- : dayjs(time).tz(timezone).format(dateFormat)}
+ {zonedTime?.format(options.customDateFormat ? customDateFormat : dateFormat)}
)}
@@ -90,7 +87,7 @@ interface UseCurrentTimeProps {
}
const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
- const [time, setTime] = useState(() => new Date(0));
+ const [time, setTime] = useState(null);
const timeoutRef = useRef(null);
const intervalRef = useRef(null);
const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);