Render timestamp only on client to prevent error of server not matching client
This commit is contained in:
parent
a149777c0e
commit
5d7721e041
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user