detect when react webview is loaded

Author: ShMcK

src/editor/ReactWebView.ts

@@ -7,6 +7,7 @@ import * as path from 'path'
  */
 class ReactWebView {
   // @ts-ignore
+  public loaded: boolean
   private panel: vscode.WebviewPanel
   private extensionPath: string
   private disposables: vscode.Disposable[] = []
@@ -26,7 +27,14 @@ class ReactWebView {
     this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
 
     // Handle messages from the webview
-    const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action)
+    const onReceive = (action: string | CR.Action) => {
+      // await loading of webview in React before proceeding with loaded state
+      if (action === 'WEBVIEW_LOADED') {
+        this.loaded = true
+      } else {
+        vscode.commands.executeCommand('coderoad.receive_action', action)
+      }
+    }
     this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables)
 
     // update panel on changes
@@ -52,14 +60,24 @@ class ReactWebView {
     // TODO: prevent window from moving to the left when no windows remain on rights
   }
 
-  public createOrShow(column: number): void {
+  public createOrShow(column: number, callback?: () => void): void {
     // If we already have a panel, show it.
     // Otherwise, create a new panel.
     if (this.panel && this.panel.webview) {
       this.panel.reveal(column)
     } else {
       this.panel = this.createWebviewPanel(column)
     }
+    if (callback) {
+      // listen for when webview is loaded
+      // unfortunately there is no easy way of doing this
+      let webPanelListener = setInterval(() => {
+        if (this.loaded) {
+          setTimeout(callback)
+          clearInterval(webPanelListener)
+        }
+      }, 200)
+    }
   }
 
   private createWebviewPanel(column: number): vscode.WebviewPanel {

src/editor/commands/index.ts

@@ -50,12 +50,8 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre
       orientation: 0,
       groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }],
     })
-    webview.createOrShow(column)
-    // NOTE: createOrShow and layout command cannot be async
-    // this creates an async issue where the webview cannot detect when it has been initialized
-    setTimeout(() => {
-      machine.send('WEBVIEW_INITIALIZED')
-    }, 2000)
+    const callback = () => machine.send('WEBVIEW_INITIALIZED')
+    webview.createOrShow(column, callback)
   },
   // launch a new tutorial
   // NOTE: may be better to move into action as logic is primarily non-vscode

web-app/src/App.tsx

@@ -3,6 +3,7 @@ import * as CR from 'typings'
 
 import Debugger from './components/Debugger'
 import Routes from './Routes'
+import { send } from './utils/vscode'
 import DataContext, { initialState, initialData } from './utils/DataContext'
 
 interface ReceivedEvent {
@@ -35,6 +36,11 @@ const App = () => {
     }
   })
 
+  // trigger progress when webview loaded
+  React.useEffect(() => {
+    send('WEBVIEW_LOADED')
+  })
+
   const value = {
     state,
     position: data.position,
@@ -46,7 +52,7 @@ const App = () => {
   return (
     <DataContext.Provider value={value}>
       <div>
-        {/* <Debugger value={value} /> */}
+        <Debugger value={value} />
         <Routes state={state} />
       </div>
     </DataContext.Provider>