fix dropdown label delay

Author: ci-bot

apps/remix-ide/src/blockchain/blockchain.tsx

@@ -796,7 +796,6 @@ export class Blockchain extends Plugin {
 
     const logTransaction = (txhash, origin) => {
       this.detectNetwork((error, network) => {
-        console.log(`transaction sent: ${txhash}`, network)
         if (network && network.id) {
           _paq.push(['trackEvent', 'udapp', `sendTransaction-from-${origin}`, `${txhash}-${network.id}`])
         } else {

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { EnvironmentProps } from '../types'
 import { Dropdown } from 'react-bootstrap'
@@ -12,6 +12,8 @@ const _paq = (window._paq = window._paq || [])
 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 remixVMs = providers.filter(p => p.config.isVM)
   const injectedProviders = providers.filter(p => p.config.isInjected)
@@ -23,10 +25,43 @@ 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 handleChangeExEnv = (env: string) => {
-    const provider = props.providers.providerList.find((exEnv) => exEnv.name === env)
-    const context = provider.name
-    props.setExecutionContext({ context })
+  const stopSwitching = () => {
+    if (watchdogTimer.current) {
+      clearTimeout(watchdogTimer.current)
+      watchdogTimer.current = null
+    }
+    setIsSwitching(false)
+  }
+
+  useEffect(() => {
+    if (isSwitching) {
+      stopSwitching()
+    }
+  }, [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)
+
+    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 currentProvider = props.providers.providerList.find((exEnv) => exEnv.name === props.selectedEnv)
@@ -165,6 +200,8 @@ export function EnvironmentUI(props: EnvironmentProps) {
             <span className="ms-1" style = {{ textTransform: 'none', fontSize: '13px' }}>Reset State</span>
           </span>
         </CustomTooltip> }
+        {isSwitching && <i className="fa fa-spinner fa-pulse ms-2" aria-hidden="true"></i>}
+
       </label>
       <div className="" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown