fix: wait for app selected

Author: Akryum

packages/app-frontend/src/features/apps/index.ts

@@ -71,6 +71,20 @@ function fetchApps () {
   getBridge().send(BridgeEvents.TO_BACK_APP_LIST, {})
 }
 
+export const pendingSelectAppId = ref<string>(null)
+
+const pendingSelectPromises: (() => void)[] = []
+
+export function waitForAppSelect (): Promise<void> {
+  if (!pendingSelectAppId.value) {
+    return Promise.resolve()
+  } else {
+    return new Promise(resolve => {
+      pendingSelectPromises.push(resolve)
+    })
+  }
+}
+
 export function setupAppsBridgeEvents (bridge: Bridge) {
   bridge.on(BridgeEvents.TO_FRONT_APP_ADD, ({ appRecord }) => {
     addApp(appRecord)
@@ -85,5 +99,14 @@ export function setupAppsBridgeEvents (bridge: Bridge) {
     apps.value = list
   })
 
+  bridge.on(BridgeEvents.TO_FRONT_APP_SELECTED, ({ id }) => {
+    if (pendingSelectAppId.value === id) {
+      pendingSelectAppId.value = null
+      for (const resolve of pendingSelectPromises) {
+        resolve()
+      }
+    }
+  })
+
   fetchApps()
 }

packages/app-frontend/src/features/components/composable/components.ts

@@ -11,7 +11,7 @@ import {
   openInEditor
 } from '@vue-devtools/shared-utils'
 import { getBridge, useBridge } from '@front/features/bridge'
-import { AppRecord } from '@front/features/apps'
+import { AppRecord, waitForAppSelect } from '@front/features/apps'
 import { useRoute, useRouter } from '@front/util/router'
 
 export const rootInstances = ref<ComponentTreeNode[]>([])
@@ -95,7 +95,8 @@ export function useComponents () {
     deep: true
   })
 
-  onBridge(BridgeEvents.TO_FRONT_APP_SELECTED, ({ id }) => {
+  onBridge(BridgeEvents.TO_FRONT_APP_SELECTED, async ({ id }) => {
+    await waitForAppSelect()
     requestComponentTree()
     selectedComponentData.value = null
     if (lastSelectedApp !== null) {
@@ -255,7 +256,7 @@ export function resetComponents () {
 
 export const requestedComponentTree = new Set()
 
-export function requestComponentTree (instanceId: ComponentTreeNode['id'] = null) {
+export async function requestComponentTree (instanceId: ComponentTreeNode['id'] = null) {
   if (!instanceId) {
     instanceId = '_root'
   }
@@ -268,6 +269,7 @@ export function requestComponentTree (instanceId: ComponentTreeNode['id'] = null
   if (instanceId === '_root') {
     resetComponentsQueued.value = true
   }
+  await waitForAppSelect()
   getBridge().send(BridgeEvents.TO_BACK_COMPONENT_TREE, {
     instanceId,
     filter: treeFilter.value
@@ -305,10 +307,11 @@ export function addToComponentsMap (instance: ComponentTreeNode) {
   }
 }
 
-export function loadComponent (id: ComponentTreeNode['id']) {
+export async function loadComponent (id: ComponentTreeNode['id']) {
   if (!id || selectedComponentPendingId.value === id) return
   lastSelectedComponentId = id
   selectedComponentPendingId.value = id
+  await waitForAppSelect()
   getBridge().send(BridgeEvents.TO_BACK_COMPONENT_SELECTED_DATA, id)
 }
 

packages/app-frontend/src/features/header/AppSelect.vue

@@ -4,7 +4,7 @@ import AppHeaderSelect from './AppHeaderSelect.vue'
 import { watch, defineComponent } from '@vue/composition-api'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import SharedData from '@vue-devtools/shared-utils/lib/shared-data'
-import { useApps } from '@front/features/apps'
+import { useApps, pendingSelectAppId } from '@front/features/apps'
 import { useOrientation } from '@front/features/layout/orientation'
 import { useRouter } from '@front/util/router'
 import { useBridge } from '../bridge'
@@ -26,7 +26,10 @@ export default defineComponent({
     } = useApps()
 
     watch(currentAppId, value => {
-      bridge.send(BridgeEvents.TO_BACK_APP_SELECT, value)
+      if (pendingSelectAppId.value !== value) {
+        pendingSelectAppId.value = value
+        bridge.send(BridgeEvents.TO_BACK_APP_SELECT, value)
+      }
     }, {
       immediate: true
     })

packages/app-frontend/src/features/timeline/composable/layers.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
 import { BridgeEvents, setStorage } from '@vue-devtools/shared-utils'
-import { useApps } from '@front/features/apps'
+import { useApps, waitForAppSelect } from '@front/features/apps'
 import { getBridge } from '@front/features/bridge'
 import {
   layersPerApp,
@@ -110,6 +110,7 @@ export function useLayers () {
   }
 }
 
-export function fetchLayers () {
+export async function fetchLayers () {
+  await waitForAppSelect()
   getBridge().send(BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, {})
 }