Merge pull request #60 from ruucm/fix/context-lost

Fix/context lost

packages/shadergradient/src-dev/ShaderGradientCanvas.tsx

@@ -1,5 +1,6 @@
 import { Canvas } from '@react-three/fiber'
 import { canvasProps } from './consts'
+import { useContextLostFallback } from './useContextLostFallback'
 
 export function ShaderGradientCanvas({
   children,
@@ -8,6 +9,9 @@ export function ShaderGradientCanvas({
   fov = 45,
   ...rest
 }: any) {
+  const [contextLost, handleContextEvents]: any = useContextLostFallback()
+
+  if (contextLost === 1) return <WebGLContextLostPlaceholder />
   return (
     <>
       {/* Disable drag rotations of gradeint (for Framer & Figma) */}
@@ -18,10 +22,37 @@ export function ShaderGradientCanvas({
         resize={{ offsetSize: true }}
         {...canvasProps(pixelDensity, fov)}
         style={{ pointerEvents }}
+        onCreated={handleContextEvents}
         {...rest}
       >
         {children}
       </Canvas>
     </>
   )
 }
+
+function WebGLContextLostPlaceholder() {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: 'linear-gradient(to right, #ff7e5f, #feb47b)', // Example gradient
+        color: 'white',
+        fontSize: '20px',
+        textAlign: 'center',
+        padding: '20px',
+        fontFamily: 'Inter',
+        fontWeight: '500',
+      }}
+    >
+      <p>
+        The graphics context has been lost. Please wait while we try to restore
+        it...
+      </p>
+    </div>
+  )
+}

packages/shadergradient/src-dev/useContextLostFallback.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+export function useContextLostFallback() {
+  const [contextLost, setContextLost] = useState(-1)
+
+  const handleContextEvents = (state) => {
+    const renderer = state.gl.domElement
+
+    const handleContextLost = (event) => {
+      event.preventDefault()
+      setContextLost(1)
+      console.log('[Context Lost]')
+    }
+
+    const handleContextRestored = (event) => {
+      setContextLost(0)
+      console.log('[Context Restored]')
+      // Additional reinitialization if needed
+    }
+
+    const handleContextError = (event) => {
+      setContextLost(2)
+      console.log('[Context Error]')
+    }
+
+    renderer.addEventListener('webglcontextlost', handleContextLost)
+    renderer.addEventListener('webglcontextrestored', handleContextRestored)
+    renderer.addEventListener('webglcontextcreationerror', handleContextError)
+
+    return () => {
+      renderer.removeEventListener('webglcontextlost', handleContextLost)
+      renderer.removeEventListener(
+        'webglcontextrestored',
+        handleContextRestored
+      )
+      renderer.removeEventListener(
+        'webglcontextcreationerror',
+        handleContextError
+      )
+    }
+  }
+
+  return [contextLost, handleContextEvents]
+}