Preload the application assets and cache connections

package.json

@@ -18,7 +18,7 @@
     "url": "https://github.com/prismatic-io/embedded.git"
   },
   "license": "MIT",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

src/lib/init.ts

@@ -18,7 +18,7 @@ export interface InitProps
       State,
       "screenConfiguration" | "theme" | "fontConfiguration" | "translation"
     >,
-    Partial<Pick<State, "filters" | "prismaticUrl">> {}
+    Partial<Pick<State, "filters" | "prismaticUrl" | "skipPreload">> {}
 
 export const EMBEDDED_DEFAULTS = {
   filters: {
@@ -34,6 +34,7 @@ export const EMBEDDED_DEFAULTS = {
     marketplace: {},
     initializing: {},
   },
+  skipPreload: false,
   theme: "LIGHT",
   fontConfiguration: undefined,
   translation: {},
@@ -62,6 +63,24 @@ export const init = (optionsBase?: InitProps) => {
     return;
   }
 
+  /**
+   * This establishes a connection to the prismatic url and preloads
+   * assets (css, js, fonts, etc.) into browser cache. Subsequent
+   * calls, use existing connections and cached assets.
+   */
+  if (!options.skipPreload) {
+    document.body.insertAdjacentHTML(
+      "beforeend",
+      `<iframe
+        src="${state.prismaticUrl}/embedded"
+        title="PIO Embedded Preload"
+        height="0"
+        width="0"
+        style="visibility: hidden; display: none;"
+      />`
+    );
+  }
+
   document.head.insertAdjacentHTML("beforeend", styles);
 
   const embeddedElement = document.createElement("div");

src/state.ts

@@ -11,6 +11,7 @@ export interface State {
   embeddedDesignerEnabled: boolean;
   prismaticUrl: string;
   screenConfiguration?: ScreenConfiguration;
+  skipPreload?: boolean;
   theme?: Theme;
   fontConfiguration?: FontConfiguration;
   translation?: Translation;