diff --git a/components/InitialPageLoadProvider.tsx b/components/InitialPageLoadProvider.tsx --- a/components/InitialPageLoadProvider.tsx +++ b/components/InitialPageLoadProvider.tsx @@ -2,11 +2,11 @@ import { useEffect } from "react"; import { create } from "zustand"; -export const useInitialPageLoad = create(() => false); +export const useHasPageLoaded = create(() => false); export function InitialPageLoad(props: { children: React.ReactNode }) { useEffect(() => { setTimeout(() => { - useInitialPageLoad.setState(() => true); + useHasPageLoaded.setState(() => true); }, 80); }, []); return <>{props.children}; diff --git a/components/Blocks/DateTimeBlock.tsx b/components/Blocks/DateTimeBlock.tsx --- a/components/Blocks/DateTimeBlock.tsx +++ b/components/Blocks/DateTimeBlock.tsx @@ -8,14 +8,14 @@ import { setHours, setMinutes } from "date-fns"; import { Separator } from "react-aria-components"; import { Checkbox } from "components/Checkbox"; -import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { useHasPageLoaded } from "components/InitialPageLoadProvider"; import { useSpring, animated } from "@react-spring/web"; import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall"; export function DateTimeBlock(props: BlockProps) { const [isClient, setIsClient] = useState(false); - let initialPageLoad = useInitialPageLoad(); + let initialPageLoad = useHasPageLoaded(); useEffect(() => { setIsClient(true); diff --git a/src/hooks/useLocalizedDate.ts b/src/hooks/useLocalizedDate.ts --- a/src/hooks/useLocalizedDate.ts +++ b/src/hooks/useLocalizedDate.ts @@ -2,7 +2,7 @@ import { useContext, useMemo } from "react"; import { DateTime } from "luxon"; import { RequestHeadersContext } from "components/Providers/RequestHeadersProvider"; -import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { useHasPageLoaded } from "components/InitialPageLoadProvider"; /** * Hook that formats a date string using Luxon with timezone and locale from request headers. @@ -20,14 +20,14 @@ options?: Intl.DateTimeFormatOptions, ): string { const { timezone, language } = useContext(RequestHeadersContext); - const isInitialPageLoad = useInitialPageLoad(); + const hasPageLoaded = useHasPageLoaded(); return useMemo(() => { // Parse the date string to Luxon DateTime let dateTime = DateTime.fromISO(dateString); // On initial page load, use header timezone. After hydration, use system timezone - const effectiveTimezone = isInitialPageLoad + const effectiveTimezone = !hasPageLoaded ? timezone : Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -39,7 +39,7 @@ // On initial page load, use header locale. After hydration, use system locale // Parse locale from accept-language header (take first locale) // accept-language format: "en-US,en;q=0.9,es;q=0.8" - const effectiveLocale = isInitialPageLoad + const effectiveLocale = !hasPageLoaded ? language?.split(",")[0]?.split(";")[0]?.trim() || "en-US" : Intl.DateTimeFormat().resolvedOptions().locale; @@ -50,5 +50,5 @@ // Fallback to en-US if locale is invalid return dateTime.toLocaleString(options, { locale: "en-US" }); } - }, [dateString, options, timezone, language, isInitialPageLoad]); + }, [dateString, options, timezone, language, hasPageLoaded]); } diff --git a/components/Blocks/BlueskyPostBlock/index.tsx b/components/Blocks/BlueskyPostBlock/index.tsx --- a/components/Blocks/BlueskyPostBlock/index.tsx +++ b/components/Blocks/BlueskyPostBlock/index.tsx @@ -10,7 +10,6 @@ import { BlueskyPostEmpty } from "./BlueskyEmpty"; import { BlueskyRichText } from "./BlueskyRichText"; import { Separator } from "components/Layout"; -import { useInitialPageLoad } from "components/InitialPageLoadProvider"; import { BlueskyTiny } from "components/Icons/BlueskyTiny"; import { CommentTiny } from "components/Icons/CommentTiny"; import { useLocalizedDate } from "src/hooks/useLocalizedDate"; diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx --- a/components/Blocks/TextBlock/index.tsx +++ b/components/Blocks/TextBlock/index.tsx @@ -4,7 +4,7 @@ import { isVisible } from "src/utils/isVisible"; import { EditorState, TextSelection } from "prosemirror-state"; import { RenderYJSFragment } from "./RenderYJSFragment"; -import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { useHasPageLoaded } from "components/InitialPageLoadProvider"; import { BlockProps } from "../Block"; import { focusBlock } from "src/utils/focusBlock"; import { useUIState } from "src/useUIState"; @@ -37,7 +37,7 @@ }, ) { let isLocked = useEntity(props.entityID, "block/is-locked"); - let initialized = useInitialPageLoad(); + let initialized = useHasPageLoaded(); let first = props.previousBlock === null; let permission = useEntitySetContext().permissions.write; diff --git a/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx --- a/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx @@ -7,7 +7,7 @@ import { focusBlock } from "src/utils/focusBlock"; import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api"; import { Separator } from "components/Layout"; -import { useInitialPageLoad } from "components/InitialPageLoadProvider"; +import { useHasPageLoaded } from "components/InitialPageLoadProvider"; import { BlueskyTiny } from "components/Icons/BlueskyTiny"; import { CommentTiny } from "components/Icons/CommentTiny"; import { useLocalizedDate } from "src/hooks/useLocalizedDate"; @@ -123,7 +123,7 @@ }; const ClientDate = (props: { date?: string }) => { - let pageLoaded = useInitialPageLoad(); + let pageLoaded = useHasPageLoaded(); const formattedDate = useLocalizedDate( props.date || new Date().toISOString(), {