feat: added toasts and indicator for ONNX model loading

package.json

@@ -29,6 +29,7 @@
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.3.1",
+    "react-hot-toast": "^2.5.1",
     "react-markdown": "^9.0.3",
     "react-tooltip": "^5.28.0",
     "recharts": "^2.15.0",

src/hooks/useMaiaEngine/model.ts

@@ -29,7 +29,6 @@ class Maia {
     try {
       const buffer = await this.getCachedModel(this.modelUrl, this.type)
       await this.initializeModel(buffer)
-      this.options.setStatus('ready')
     } catch (e) {
       this.options.setStatus('no-cache')
     }

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { Toaster } from 'react-hot-toast'
 import Script from 'next/script'
 import { useRouter } from 'next/router'
 import type { AppProps } from 'next/app'
@@ -51,6 +52,7 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
         </div>
         <Footer />
       </div>
+      <Toaster position="bottom-right" />
       <Analytics />
       <Script async src="/analytics.js?id=G-SNP84LXLKY" />
       <Script id="analytics">

src/pages/analysis/[...id].tsx

@@ -1,3 +1,4 @@
+import toast from 'react-hot-toast'
 import React, {
   useMemo,
   Dispatch,
@@ -6,6 +7,7 @@ import React, {
   useContext,
   useCallback,
   SetStateAction,
+  useRef,
 } from 'react'
 import Head from 'next/head'
 import type { NextPage } from 'next'
@@ -261,11 +263,26 @@ const Analysis: React.FC<Props> = ({
   const [arrows, setArrows] = useState<DrawShape[]>([])
   const [brushes, setBrushes] = useState<DrawBrushes>({} as DrawBrushes)
   const [screen, setScreen] = useState(screens[0])
+  const toastId = useRef<string>(null)
 
   useEffect(() => {
     setHoverArrow(null)
   }, [controller.currentIndex])
 
+  useEffect(() => {
+    if (maiaStatus === 'loading' && !toastId.current) {
+      toastId.current = toast.loading('Loading Maia Model...')
+    } else if (maiaStatus === 'ready') {
+      if (toastId.current) {
+        toast.success('Loaded Maia! Analysis is ready', {
+          id: toastId.current,
+        })
+      } else {
+        toast.success('Loaded Maia! Analysis is ready')
+      }
+    }
+  }, [maiaStatus])
+
   const launchContinue = useCallback(() => {
     const fen = analyzedGame.moves[controller.currentIndex].board
     const url = '/play' + '?fen=' + encodeURIComponent(fen)