a tool for shared writing and social publishing
fix hydration error w/ theme button
+8
-4
+8
-4
components/ThemeManager/ThemeSetter.tsx
+8
-4
components/ThemeManager/ThemeSetter.tsx
···
38
38
import { isIOS, useViewportSize } from "@react-aria/utils";
39
39
import { onMouseDown } from "src/utils/iosInputMouseDown";
40
40
import { HoverButton } from "components/Buttons";
41
+
import { useInitialPageLoad } from "components/InitialPageLoadProvider";
41
42
42
43
export type pickers =
43
44
| "null"
···
65
66
}
66
67
export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
67
68
let { rep } = useReplicache();
69
+
let pageLoaded = useInitialPageLoad();
68
70
// I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here.
69
71
let leafletValue = useColorAttribute(props.entityID, "theme/page-background");
70
72
let pageValue = useColorAttribute(props.entityID, "theme/card-background");
···
97
99
let randomPositions = useMemo(() => {
98
100
let values = [] as string[];
99
101
for (let i = 0; i < 3; i++) {
100
-
values.push(
101
-
`${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%`,
102
-
);
102
+
if (!pageLoaded) values.push(`100% 100%`);
103
+
else
104
+
values.push(
105
+
`${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%`,
106
+
);
103
107
}
104
108
return values;
105
-
}, []);
109
+
}, [pageLoaded]);
106
110
107
111
let gradient = [
108
112
`radial-gradient(at ${randomPositions[0]}, ${accent1Value.toString("hex")}80 2px, transparent 70%)`,