fix: Load the preview url without waiting for the file to load. (#240)

src/ts/editor/state.ts

@@ -89,6 +89,10 @@ export class EditorState extends ListenersMixin(Base) {
    * Value is null when the file is not found or fails to load.
    */
   file?: EditorFileData | null;
+  /**
+   * File preview url
+   */
+  filePreviewUrl?: string | null;
   /**
    * Editor history.
    */
@@ -389,55 +393,6 @@ export class EditorState extends ListenersMixin(Base) {
       );
   }
 
-  /**
-   * When loading a file the url may not be defined and needs to be verified.
-   * If a preview server is defined in the project config the preview server
-   * settings are loaded to check for a url defined by the preview server.
-   */
-  protected ensureFileUrl() {
-    // If there is no url for the file, check if the preview server
-    // knows how to preview the file.
-    if (this.file && !this.file.url) {
-      const originalPath = this.file.file.path;
-      const updateFileUrl = (previewSettings: PreviewSettings | null) => {
-        // If the path has changed then we have moved on, nothing to see here.
-        if (originalPath !== this.file?.file.path) {
-          return;
-        }
-
-        if (
-          previewSettings &&
-          this.file?.file.path &&
-          this.file?.file.path in previewSettings.routes
-        ) {
-          const baseUrl = interpolatePreviewUrl(
-            this.project?.preview as EditorPreviewSettings,
-            this.workspace as WorkspaceData
-          );
-          const route = previewSettings.routes[this.file?.file.path];
-
-          if ((route as PreviewRoutesMetaData).path) {
-            this.file.url = `${baseUrl}${(
-              route as PreviewRoutesMetaData
-            ).path.replace(REGEX_START_SLASH, '')}`;
-          } else {
-            this.file.url = `${baseUrl}${(route as PreviewRoutesLocaleData)[
-              previewSettings.defaultLocale
-            ].path.replace(REGEX_START_SLASH, '')}`;
-          }
-
-          this.render();
-        }
-      };
-
-      if (this.previewConfig === undefined) {
-        this.getPreviewConfig(updateFileUrl);
-      } else {
-        updateFileUrl(this.previewConfig);
-      }
-    }
-  }
-
   /**
    * Lazy load of files data.
    *
@@ -529,18 +484,14 @@ export class EditorState extends ListenersMixin(Base) {
       return;
     }
 
-    // Start the loading of the preview configuration before waiting
-    // for a full file load response.
-    this.previewConfigOrGetPreviewConfig();
+    // Update the preview url for the path.
+    this.updateFilePreviewUrl(file.path);
 
     this.promises[promiseKey] = this.api
       .getFile(file)
       .then(data => {
         this.file = data;
 
-        // Update the file url as it may not be not defined.
-        this.ensureFileUrl();
-
         // Loading is complete, remove the loading file information.
         this.loadingFilePath = undefined;
 
@@ -1001,9 +952,6 @@ export class EditorState extends ListenersMixin(Base) {
       .then(data => {
         this.file = data;
 
-        // Update the file url as it may not be not defined.
-        this.ensureFileUrl();
-
         // Reload the workspace from the api.
         // Refreshes the publish status.
         this.workspace = this.getWorkspace();
@@ -1063,6 +1011,38 @@ export class EditorState extends ListenersMixin(Base) {
     document.title = parts.join(' — ');
   }
 
+  protected updateFilePreviewUrl(path: string) {
+    const updateUrl = (previewSettings: PreviewSettings | null) => {
+      if (previewSettings && path in previewSettings.routes) {
+        const baseUrl = interpolatePreviewUrl(
+          this.project?.preview as EditorPreviewSettings,
+          this.workspace as WorkspaceData
+        );
+        const route = previewSettings.routes[path];
+
+        if ((route as PreviewRoutesMetaData).path) {
+          this.filePreviewUrl = `${baseUrl}${(
+            route as PreviewRoutesMetaData
+          ).path.replace(REGEX_START_SLASH, '')}`;
+        } else {
+          this.filePreviewUrl = `${baseUrl}${(route as PreviewRoutesLocaleData)[
+            previewSettings.defaultLocale
+          ].path.replace(REGEX_START_SLASH, '')}`;
+        }
+
+        this.render();
+      } else {
+        this.filePreviewUrl = null;
+      }
+    };
+
+    if (this.previewConfig === undefined) {
+      this.getPreviewConfig(updateUrl);
+    } else {
+      updateUrl(this.previewConfig);
+    }
+  }
+
   /**
    * Lazy load of workspace data.
    *

src/ts/editor/ui/parts/preview.ts

@@ -105,7 +105,7 @@ export class PreviewPart extends BasePart implements UiPartComponent {
 
     pieces.push(this.partToolbar.template());
 
-    if (this.config.state.file?.url) {
+    if (this.config.state.filePreviewUrl) {
       pieces.push(
         this.partFrame.template(
           this.partToolbar.device,

src/ts/editor/ui/parts/preview/frame.ts

@@ -143,7 +143,7 @@ export class PreviewFramePart extends BasePart implements UiPartComponent {
       // Needs to be manually set in JS since the html src does not change the
       // value and will not trigger a refresh like it will in JS.
       (iframe as HTMLIFrameElement).src =
-        this.config.state.file?.url || (iframe as HTMLIFrameElement).src;
+        this.config.state.filePreviewUrl || (iframe as HTMLIFrameElement).src;
     }
   }
 
@@ -168,7 +168,7 @@ export class PreviewFramePart extends BasePart implements UiPartComponent {
         })}
       >
         <iframe
-          src=${this.config.state.file?.url || ''}
+          src=${this.config.state.filePreviewUrl || ''}
           style=${styleMap({
             'min-height': sizing.height ? `${sizing.height}px` : 'none',
             width: sizing.width ? `${sizing.width}px` : 'auto',