Use useSignalsEffect, not effect, because wasmInitFailed is initially true

Which broke the web app

Author: franknoirot

package-lock.json

@@ -36,6 +36,7 @@
     "@million/lint": "^1.0.14",
     "@msgpack/msgpack": "^3.1.2",
     "@preact/signals-core": "^1.12.1",
+    "@preact/signals-react": "^3.6.1",
     "@react-hook/resize-observer": "^2.0.1",
     "@replit/codemirror-interact": "^6.3.1",
     "@ts-stack/markdown": "^1.5.0",

package.json

@@ -62,6 +62,7 @@ import {
   MlEphantManagerReactContext,
   MlEphantManagerTransitions2,
 } from '@src/machines/mlEphantManagerMachine2'
+import { useSignalEffect } from '@preact/signals-react'
 
 if (window.electron) {
   maybeWriteToDisk(window.electron)
@@ -191,8 +192,14 @@ export function App() {
     authToken,
   ])
 
-  useEffect(() => {
-    const needsWasmInitFailedToast = !isDesktop() && kclManager.wasmInitFailed
+  // This is, at time of writing, the only spot we need @preact/signals-react,
+  // because we can't use the core `effect()` function for this signal, because
+  // it is initially set to `true`, and will break the web app.
+  // TODO: get the loading pattern of KclManager in order so that it's for real available,
+  // then you might be able to uninstall this package and stick to just using signals-core.
+  useSignalEffect(() => {
+    const needsWasmInitFailedToast =
+      !isDesktop() && kclManager.wasmInitFailedSignal.value
     if (needsWasmInitFailedToast) {
       toast.success(
         () =>
@@ -209,7 +216,7 @@ export function App() {
       )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
-  }, [kclManager.wasmInitFailed])
+  })
 
   // Only create the native file menus on desktop
   useEffect(() => {