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