From 382252ae9abaafd8079697c10585e4cdb12c398d Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 30 Sep 2025 14:01:35 -1000
Subject: [PATCH] fix hydration error caused by date in bsky embed

---
 .../[rkey]/PublishBskyPostBlock.tsx           | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx
index 8244b495..bb44240c 100644
--- a/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx
@@ -43,16 +43,6 @@ export const PubBlueskyPostBlock = ({ post }: { post: PostView }) => {
       let postId = post.uri.split("/")[4];
       let url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
 
-      let datetimeFormatted = new Date(
-        timestamp ? timestamp : "",
-      ).toLocaleString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-      });
       return (
         <div
           className={`
@@ -98,7 +88,7 @@ export const PubBlueskyPostBlock = ({ post }: { post: PostView }) => {
             </>
           )}
           <div className="w-full flex gap-2 items-center justify-between">
-            <div className="text-xs text-tertiary">{datetimeFormatted}</div>
+            <ClientDate date={timestamp} />
             <div className="flex gap-2 items-center">
               {post.replyCount && post.replyCount > 0 && (
                 <>
@@ -123,3 +113,22 @@ export const PubBlueskyPostBlock = ({ post }: { post: PostView }) => {
       );
   }
 };
+
+const ClientDate = (props: { date?: string }) => {
+  let pageLoaded = useInitialPageLoad();
+  if (!pageLoaded) return null;
+
+  let datetimeFormatted = new Date(props.date ? props.date : "").toLocaleString(
+    "en-US",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+    },
+  );
+
+  return <div className="text-xs text-tertiary">{datetimeFormatted}</div>;
+};
-- 
2.51.2