fix: Keep existing preview state while loading a new file. (#238)

Keeps the UI for the existing file while waiting for the next file to load.

Also hides the existing editing UI and show the loading UI instead when there is a loading file.

src/ts/editor/state.ts

@@ -599,9 +599,6 @@ export class EditorState extends ListenersMixin(Base) {
         }
       });
 
-    // Unset the existing file since it is 'unloaded'.
-    this.file = undefined;
-
     // Mark the file path that is being loaded.
     this.loadingFilePath = file.path;
 

src/ts/editor/ui/parts/content.ts

@@ -138,7 +138,7 @@ export class ContentPart extends BasePart implements UiPartComponent {
 
     subParts.push(this.partToolbar.template());
 
-    if (this.config.editor.state.inProgress(StatePromiseKeys.GetFile)) {
+    if (this.config.editor.state.loadingFilePath) {
       subParts.push(html`<div class="le__part__content__loading">
         ${templateLoading(
           {},

src/ts/editor/ui/parts/content/toolbar.ts

@@ -103,7 +103,7 @@ export class ContentToolbarPart extends BasePart implements UiPartComponent {
   }
 
   templateIconRefresh(): TemplateResult {
-    if (!this.config.state.file) {
+    if (!this.config.state.file || this.config.state.loadingFilePath) {
       return html``;
     }
 

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

@@ -156,7 +156,10 @@ export class PreviewPart extends BasePart implements UiPartComponent {
   templatePreviewNotAvailable(): TemplateResult {
     // When waiting for the file to load do not show anything
     // since the file load is already showing.
-    if (this.config.editor.state.inProgress(StatePromiseKeys.GetFile)) {
+    if (
+      !this.config.state.loadingFilePath &&
+      this.config.editor.state.inProgress(StatePromiseKeys.GetFile)
+    ) {
       return html``;
     }