loading indicator in layout preview works properly

2 files changed, 12 insertions, 25 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index c2e59b4a4..57f4a1e94 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -704,6 +704,12 @@
     margin-left: 20px;
     margin-right: 20px;
 
+    &.loading {
+        width: 100px;
+        height: 100px;
+        border: none;
+    }
+
     &:hover .docCreatorMenu-zoom-button-container {
         display: block;
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 3cdde90d5..257c7fc00 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -968,23 +968,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 
-    get savedLayoutsPreviewContents() {
-        return (
-            <div className="docCreatorMenu-preview-container">
-                {this._savedLayouts.map((layout, index) => (
-                    <div
-                        className="docCreatorMenu-preview-window"
-                        style={{
-                            border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                            boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                        }}
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}>
-                        {this.layoutPreviewContents(87, layout, true, index)}
-                    </div>
-                ))}
-            </div>
-        );
-    }
 
     @action updateXMargin = (input: string) => {
         this._layout.xMargin = Number(input);
@@ -1128,14 +1111,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._renderedDocCollection = collection;
     }
 
-    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
-        const doc: Doc | undefined = altLayout ? altLayout.template : this._fullyRenderedDocs[0]; //!!! might cause a slow down
-        if (!doc) return;
+    layoutPreviewContents = (id?: number) => {
 
         return this._docsRendering ? (
-            <div className="loading-spinner">
-                <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-            </div> 
+            <div className="docCreatorMenu-layout-preview-window-wrapper loading" id={String(id) ?? undefined}>
+                <div className="loading-spinner">
+                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                </div> 
+            </div>
             ) : !this._renderedDocCollection? null : (
             <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
                 <DocumentView
@@ -1380,8 +1363,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 return this.templatesPreviewContents;
             case 'options':
                 return this.optionsMenuContents;
-            case 'saved':
-                return this.savedLayoutsPreviewContents;
             case 'dashboard':
                 return this.dashboardContents;
             default: