From 5d7721e041019162a6ad656b1805d106a78abe69 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 5 Oct 2022 18:43:51 -0500
Subject: [PATCH] Render timestamp only on client to prevent error of server
 not matching client

---
 web/components/relative-timestamp.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/components/relative-timestamp.tsx b/web/components/relative-timestamp.tsx
index d4b1c189..eb03e324 100644
--- a/web/components/relative-timestamp.tsx
+++ b/web/components/relative-timestamp.tsx
@@ -1,15 +1,22 @@
 import { DateTimeTooltip } from './datetime-tooltip'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { fromNow } from 'web/lib/util/time'
 
 export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    // Only render on client to prevent difference from server.
+    setIsClient(true)
+  }, [])
+
   return (
     <DateTimeTooltip
       className="ml-1 whitespace-nowrap text-gray-400"
       time={time}
     >
-      {fromNow(time)}
+      {isClient ? fromNow(time) : ''}
     </DateTimeTooltip>
   )
 }