update spinner logic

Author: ci-bot

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -13,7 +13,23 @@ export function EnvironmentUI(props: EnvironmentProps) {
   const vmStateName = useRef('')
   const providers = props.providers.providerList
   const [isSwitching, setIsSwitching] = useState(false)
-  const watchdogTimer = useRef<NodeJS.Timeout | null>(null)
+
+  const switchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (switchTimeoutRef.current) {
+      clearTimeout(switchTimeoutRef.current)
+    }
+    setIsSwitching(false)
+  }, [props.selectedEnv])
+
+  useEffect(() => {
+    return () => {
+      if (switchTimeoutRef.current) {
+        clearTimeout(switchTimeoutRef.current)
+      }
+    }
+  }, [])
 
   const remixVMs = providers.filter(p => p.config.isVM)
   const injectedProviders = providers.filter(p => p.config.isInjected)
@@ -25,43 +41,22 @@ export function EnvironmentUI(props: EnvironmentProps) {
   const walletConnect = providers.find(p => p.name === 'walletconnect' || p.name === 'walletConnect')
   const httpProvider = providers.find(p => p.name === 'basic-http-provider' || p.name === 'web3Provider' || p.name === 'basicHttpProvider')
 
-  const stopSwitching = () => {
-    if (watchdogTimer.current) {
-      clearTimeout(watchdogTimer.current)
-      watchdogTimer.current = null
-    }
-    setIsSwitching(false)
-  }
+  const handleChangeExEnv = (env: string) => {
+    if (props.selectedEnv === env || isSwitching) return
 
-  useEffect(() => {
-    if (isSwitching) {
-      stopSwitching()
+    if (switchTimeoutRef.current) {
+      clearTimeout(switchTimeoutRef.current)
     }
-  }, [props.selectedEnv])
-
-  const handleChangeExEnv = async (env: string) => {
-    if (props.selectedEnv === env || isSwitching) return
 
     setIsSwitching(true)
 
-    watchdogTimer.current = setTimeout(() => {
-      stopSwitching()
-    }, 10000)
-
-    const provider = providers.find((exEnv) => exEnv.name === env)
+    switchTimeoutRef.current = setTimeout(() => {
+      setIsSwitching(false)
+    }, 8000)
 
-    if (provider && typeof provider.init === 'function') {
-      try {
-        await provider.init()
-        props.setExecutionContext({ context: env })
-      } catch (e) {
-        stopSwitching()
-      }
-    } else {
-      setTimeout(() => {
-        props.setExecutionContext({ context: env })
-      }, 0)
-    }
+    const provider = props.providers.providerList.find((exEnv) => exEnv.name === env)
+    const context = provider.name
+    props.setExecutionContext({ context })
   }
 
   const currentProvider = props.providers.providerList.find((exEnv) => exEnv.name === props.selectedEnv)