github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-09 15:07:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixed hydration error from mismatched server-rendered HTML and client-side rendered content by unifying initial timestamp

Browse Source
This commit is contained in:
Waleed Latif
2025-01-28 19:49:41 -08:00
parent 5ccf55cbb8
commit 1ce6a1ec25
5 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/layout.tsx
View File

@@ -9,11 +9,18 @@ export const metadata: Metadata = {
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode
}>) {
}) {
return (
<html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `window.INITIAL_TIMESTAMP = ${Date.now()};`,
}}
/>
</head>
<body>{children}</body>
</html>
)

9
lib/utils.ts
View File

@@ -1,6 +1,13 @@
import { clsx, type ClassValue } from "clsx"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export const getTimestamp = () => {
if (typeof window === 'undefined') {
return Date.now()
}
return window.INITIAL_TIMESTAMP || Date.now()
}

5
stores/notifications/notifications-store.ts
View File

@@ -1,6 +1,7 @@
import { create } from 'zustand'
import { devtools } from 'zustand/middleware'
import { NotificationType, Notification, NotificationStore } from './types'
import { getTimestamp } from '@/lib/utils'
export const useNotificationStore = create<NotificationStore>()(
devtools(
@@ -8,10 +9,10 @@ export const useNotificationStore = create<NotificationStore>()(
notifications: [],
addNotification: (type, message) => {
const notification: Notification = {
id: crypto.randomUUID(),
id: typeof window === 'undefined' ? '1' : crypto.randomUUID(),
type,
message,
timestamp: Date.now(),
timestamp: getTimestamp(),
isVisible: true,
}
set((state) => ({

3
stores/workflow/history-middleware.ts
View File

@@ -1,6 +1,7 @@
import { StateCreator } from 'zustand'
import { WorkflowState, WorkflowStore } from './types'
import { HistoryEntry, WorkflowHistory, HistoryActions } from './history-types'
import { getTimestamp } from '@/lib/utils'
const MAX_HISTORY_LENGTH = 20
@@ -80,7 +81,7 @@ export const createHistoryEntry = (
blocks: { ...state.blocks },
edges: [...state.edges ],
},
timestamp: Date.now(),
timestamp: getTimestamp(),
action,
})

3
types/global.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
interface Window {
INITIAL_TIMESTAMP?: number;
}