change(web): initializes OSK with keyboard if available during init

This prevents unnecessary construction of a stand-in touch layout and related DOM initialization on touch devices when fully leveraged.

android/KMEA/app/src/main/assets/android-host.js

@@ -36,7 +36,9 @@ function init() {
   keyman.beepKeyboard = beepKeyboard;
 
   // Readies the keyboard stub for instant loading during the init process.
-  KeymanWeb.registerStub(JSON.parse(jsInterface.initialKeyboard()));
+  try {
+    KeymanWeb.registerStub(JSON.parse(jsInterface.initialKeyboard()));
+  } catch {};
 
   keyman.init({
     'embeddingApp':device,

web/src/app/browser/src/contextManager.ts

@@ -799,7 +799,9 @@ export default class ContextManager extends ContextManagerBase<BrowserConfigurat
 
     // Sets the default stub (as specified with the `getSavedKeyboard` call) as active.
     if(stub) {
-      this.activateKeyboard(t[0], t[1]);
+      return this.activateKeyboard(stub.id, stub.langId);
+    } else {
+      return null;
     }
   }
 

web/src/app/browser/src/keymanEngine.ts

@@ -194,14 +194,6 @@ export default class KeymanEngine extends KeymanEngineBase<BrowserConfiguration,
     // or do anything that would mutate the value.
     const savedKeyboardStr = this.contextManager.getSavedKeyboardRaw();
 
-    if(device.touchable) {
-      this.osk = new views.AnchoredOSKView(this);
-    } else {
-      this.osk = new views.FloatingOSKView(this);
-    }
-
-    setupOskListeners(this, this.osk, this.contextManager);
-
     // Automatically performs related handler setup & maintains references
     // needed for related cleanup / shutdown.
     this.pageIntegration = new PageIntegrationHandlers(window, this);
@@ -215,16 +207,34 @@ export default class KeymanEngine extends KeymanEngineBase<BrowserConfiguration,
     this._initialized = 2;
 
     // Let any deferred, pre-init stubs complete registration
-    await Promise.resolve();
-
-    // Attempt to restore the user's last-used keyboard from their previous session.
-    //
-    // Note:  any cloud stubs will probably not be available yet.
-    // If we tracked cloud requests and awaited a Promise.all on pending queries,
-    // we could handle that too.
-    this.contextManager.restoreSavedKeyboard(savedKeyboardStr);
+    await this.config.deferForInitialization;
+
+    /*
+      Attempt to restore the user's last-used keyboard from their previous session.
+      The method auto-loads the default stub if one is available and the last-used keyboard
+      has no registered stub.
+
+      Note:  any cloud stubs will probably not be available yet.
+      If we tracked cloud requests and awaited a Promise.all on pending queries,
+      we could handle that too.
+    */
+    const loadingKbd: Promise<any> = this.contextManager.restoreSavedKeyboard(savedKeyboardStr);
+
+    // Wait for the initial keyboard to load before setting the OSK; this will avoid building an
+    // empty OSK that we'll instantly discard after.
+    try {
+      await loadingKbd;
+    } catch { /* in case of failed fetch due to network error or bad URI; we must still let the OSK init. */ };
+
+    const firstKbdConfig = {
+      keyboardToActivate: this.contextManager.activeKeyboard
+    };
+    const osk = device.touchable ? new views.AnchoredOSKView(this, firstKbdConfig) : new views.FloatingOSKView(this, firstKbdConfig);
 
-    await Promise.resolve();
+    setupOskListeners(this, osk, this.contextManager);
+    // And, now that we have our loaded active keyboard - or failed, thus must use that default...
+    // Now we set the OSK in place, an act which triggers VisualKeyboard construction.
+    this.osk = osk;
   }
 
   get register(): (x: CloudQueryResult) => void {

web/src/app/browser/src/viewsAnchorpoint.ts

@@ -17,7 +17,7 @@ function buildBaseOskConfiguration(engine: KeymanEngine) {
 };
 
 class PublishedAnchoredOSKView extends AnchoredOSKView {
-  constructor(engine: KeymanEngine, config?: ViewConfiguration) {
+  constructor(engine: KeymanEngine, config?: Partial<ViewConfiguration>) {
     let finalConfig = {
       ...buildBaseOskConfiguration(engine),
       ...(config || {})
@@ -28,7 +28,7 @@ class PublishedAnchoredOSKView extends AnchoredOSKView {
 }
 
 class PublishedFloatingOSKView extends FloatingOSKView {
-  constructor(engine: KeymanEngine, config?: FloatingOSKViewConfiguration) {
+  constructor(engine: KeymanEngine, config?: Partial<FloatingOSKViewConfiguration>) {
     let finalConfig: FloatingOSKViewConfiguration = {
       ...buildBaseOskConfiguration(engine),
       ...(config || {})
@@ -39,7 +39,7 @@ class PublishedFloatingOSKView extends FloatingOSKView {
 }
 
 class PublishedInlineOSKView extends InlinedOSKView {
-  constructor(engine: KeymanEngine, config?: ViewConfiguration) {
+  constructor(engine: KeymanEngine, config?: Partial<ViewConfiguration>) {
     let finalConfig: ViewConfiguration = {
       ...buildBaseOskConfiguration(engine),
       ...(config || {})

web/src/app/webview/src/keymanEngine.ts

@@ -1,4 +1,4 @@
-import { DefaultRules, DeviceSpec, RuleBehavior, isEmptyTransform } from '@keymanapp/keyboard-processor'
+import { DefaultRules, DeviceSpec, RuleBehavior, isEmptyTransform, Keyboard } from '@keymanapp/keyboard-processor'
 import { KeymanEngine as KeymanEngineBase, KeyboardInterface } from 'keyman/engine/main';
 import { AnchoredOSKView, ViewConfiguration, StaticActivator } from 'keyman/engine/osk';
 import { getAbsoluteX, getAbsoluteY } from 'keyman/engine/dom-utils';
@@ -71,7 +71,32 @@ export default class KeymanEngine extends KeymanEngineBase<WebviewConfiguration,
     });
 
     this.contextManager.initialize();
+    this.config.finalizeInit();
+
+    // Is triggered by the previous call.
+    // Defer to allow any pending stubs to be registered
+    await this.config.deferForInitialization;
+
+    // Was at least one stub pre-registered?
+    const kbdCache = this.keyboardRequisitioner.cache;
+    const firstStub = kbdCache.defaultStub;
+    let firstKeyboard: Keyboard;
+    if(firstStub) {
+      // If so, the common engine will have automatically started fetching it.
+      // Wait for the keyboard to load in order to avoid the high cost of building
+      // a stand-in we'll automatically replace.
+      try {
+        // Re-uses pre-existing fetch requests and fetched keyboards.
+        firstKeyboard = await kbdCache.fetchKeyboardForStub(firstStub);
+      } catch { /* in case of failed fetch due to network error or bad URI; we must still let the OSK init. */ };
+    }
 
+    const keyboardConfig: ViewConfiguration['keyboardToActivate'] = firstKeyboard ? {
+      keyboard: firstKeyboard,
+      metadata: firstStub
+    } : null;
+
+    // We construct the OSK now to avoid layout reflow thrashing from building a stand-in keyboard if possible.
     const oskConfig: ViewConfiguration = {
       hostDevice: this.config.hostDevice,
       pathConfig: this.config.paths,
@@ -82,13 +107,13 @@ export default class KeymanEngine extends KeymanEngineBase<WebviewConfiguration,
       predictionContextManager: this.contextManager.predictionContext,
       heightOverride: this.getOskHeight,
       widthOverride: this.getOskWidth,
-      isEmbedded: true
+      isEmbedded: true,
+      keyboardToActivate: keyboardConfig
     };
 
-    this.osk = new AnchoredOSKView(oskConfig);
-    setupEmbeddedListeners(this, this.osk);
-
-    this.config.finalizeInit();
+    const osk = new AnchoredOSKView(oskConfig);
+    setupEmbeddedListeners(this, osk);
+    this.osk = osk;
   }
 
   // Functions that the old 'app/webview' equivalent had always provided to the WebView

web/src/engine/osk/src/config/viewConfiguration.ts

@@ -1,4 +1,5 @@
 import { type PredictionContext } from "@keymanapp/input-processor";
+import { Keyboard, KeyboardProperties } from "@keymanapp/keyboard-processor";
 import type Activator from "../views/activator.js";
 import CommonConfiguration from "./commonConfiguration.js";
 
@@ -40,4 +41,12 @@ export default interface Configuration extends CommonConfiguration {
    * with the active context.
    */
   predictionContextManager?: PredictionContext;
+
+  /**
+   * Can be set and specified during initialization to start with the specified keyboard activated.
+   */
+  keyboardToActivate?: {
+    keyboard: Keyboard,
+    metadata: KeyboardProperties;
+  }
 }

web/src/engine/osk/src/keyboard-layout/oskKey.ts

@@ -330,7 +330,7 @@ export default abstract class OSKKey {
 
       // Abort if the element is not currently in the DOM; we can't get any info this way.
       if(!lblStyle.fontFamily) {
-        return;
+        return () => {};
       }
       this._fontFamily = lblStyle.fontFamily;
 

web/src/engine/osk/src/views/oskView.ts

@@ -238,7 +238,7 @@ export default abstract class OSKView
 
     this._bannerController = new BannerController(this.bannerView, this.hostDevice, this.config.predictionContextManager);
 
-    this.keyboardView = this._GenerateKeyboardView(null, null);
+    this.keyboardView = new EmptyView();
     this._Box.appendChild(this.keyboardView.element);
 
     // Install the default OSK stylesheets - but don't have it managed by the keyboard-specific stylesheet manager.
@@ -251,6 +251,8 @@ export default abstract class OSKView
       this.uiStyleSheetManager.linkExternalSheet(sheetHref);
     }
 
+    this.activeKeyboard = this.config.keyboardToActivate;
+
     this.setBaseMouseEventListeners();
     if(this.hostDevice.touchable) {
       this.setBaseTouchEventListeners();
@@ -540,6 +542,13 @@ export default abstract class OSKView
     keyboard: Keyboard,
     metadata: KeyboardProperties
   }) {
+    // Is the keyboard already loaded?  If so, ignore the change command.
+    //
+    // Note:  ensures that the _instances_ are the same; it's possible to make new instances
+    // to force a refresh.  Does not perform a deep-equals.
+    if(this.keyboardData?.keyboard == keyboardData?.keyboard && this.keyboardData?.metadata == keyboardData?.metadata) {
+      return;
+    }
     this.keyboardData = keyboardData;
     this.loadActiveKeyboard();