From b0bdd090322d3f4b845a1b9db697d8efabb39319 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 29 Dec 2023 00:30:46 +0100
Subject: [PATCH] fix: dumb react ssr workaround

---
 website/src/docs/MiniRepl.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index 3a16f3dd..aab37fd2 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/website/src/docs/MiniRepl.jsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import { Icon } from './Icon';
 import { silence, getPunchcardPainter, noteToMidi } from '@strudel.cycles/core';
 import { transpiler } from '@strudel.cycles/transpiler';
@@ -9,6 +9,9 @@ import { prebake } from '../repl/prebake.mjs';
 import { loadModules } from '../repl/util.mjs';
 import Claviature from '@components/Claviature';
 
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 let prebaked, modulesLoading;
 if (typeof window !== 'undefined') {
   prebaked = prebake();
@@ -89,7 +92,8 @@ export function MiniRepl({
   const editorRef = useRef();
   const containerRef = useRef();
   const [client, setClient] = useState(false);
-  useEffect(() => {
+
+  useIsomorphicLayoutEffect(() => {
     setClient(true);
     if (!editorRef.current) {
       setTimeout(() => {