fixed switching tabs to immediately render the title of the tab as content to provide feedback that something is happening. changed server to only set caching for images. fixed warnings/errors.

6 files changed, 43 insertions, 43 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c00fd5bc8..fd4b01753 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1108,7 +1108,7 @@ export class CurrentUserUtils {
                             break;
                     }
                     tools.map(({ title, toolTip, icon, btnType, numBtnType, numBtnMax, numBtnMin, click, script, width, list, ignoreClick, switchToggle }) => {
-                        var computed = click ? ComputedField.MakeFunction(click) as any : "transparent";
+                        const computed = click ? ComputedField.MakeFunction(click) as any : "transparent";
                         menuDocList.push(Docs.Create.FontIconDocument({
                             _nativeWidth: width ? width : 25,
                             _nativeHeight: 25,
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index fc1bcb8b9..4bb14273a 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -33,7 +33,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
         protected _mainCont?: HTMLDivElement;
         @observable _focusFilters: Opt<string[]>; // docFilters that are overridden when previewing a link to an anchor which has docFilters set on it
         @observable _focusRangeFilters: Opt<string[]>; // docRangeFilters that are overridden when previewing a link to an anchor which has docRangeFilters set on it
-        protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
+        protected createDashEventsTarget = (ele: HTMLDivElement | null) => { //used for stacking and masonry view
             this.dropDisposer?.();
             this.gestureDisposer?.();
             this._multiTouchDisposer?.();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 689b6a1b6..3443f33e1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -109,6 +109,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @observable _viewTransition: number = 0;  // sets the pan/zoom transform ease time- used by nudge(), focus() etc to smoothly zoom/pan.  set to 0 to use document's transition time or default of 0
     @observable _hLines: number[] | undefined;
     @observable _vLines: number[] | undefined;
+    @observable _firstRender = true; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.
     @observable _pullCoords: number[] = [0, 0];
     @observable _pullDirection: string = "";
     @observable _showAnimTimeline = false;
@@ -163,7 +164,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this.layoutDoc._panY = vals.bounds.cy;
         this.layoutDoc._viewScale = vals.scale;
     }
-    freeformData = (force?: boolean) => this.fitToContent || force ? this.fitToContentVals : undefined;
+    freeformData = (force?: boolean) => !this._firstRender && (this.fitToContent || force) ? this.fitToContentVals : undefined;
     reverseNativeScaling = () => this.fitToContent ? true : false;
     panX = () => this.freeformData()?.bounds.cx ?? NumCast(this.Document._panX);
     panY = () => this.freeformData()?.bounds.cy ?? NumCast(this.Document._panY);
@@ -1373,35 +1374,38 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     componentDidMount() {
         super.componentDidMount?.();
         this.props.setContentView?.(this);
-        this._disposers.layoutComputation = reaction(() => this.doLayoutComputation,
-            (elements) => this._layoutElements = elements || [],
-            { fireImmediately: true, name: "doLayout" });
-
-        this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
-
-        this._disposers.groupBounds = reaction(() => {
-            if (this.props.Document._isGroup && this.childDocs.length === this.childDocList?.length) {
-                const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[WidthSym](), height: cd[HeightSym]() }));
-                return aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding));
-            }
-            return undefined;
-        },
-            (cbounds) => {
-                if (cbounds) {
-                    const c = [NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym]() / 2, NumCast(this.layoutDoc.y) + this.layoutDoc[HeightSym]() / 2];
-                    const p = [NumCast(this.layoutDoc._panX), NumCast(this.layoutDoc._panY)];
-                    const pbounds = {
-                        x: (cbounds.x - p[0]) * this.zoomScaling() + c[0], y: (cbounds.y - p[1]) * this.zoomScaling() + c[1],
-                        r: (cbounds.r - p[0]) * this.zoomScaling() + c[0], b: (cbounds.b - p[1]) * this.zoomScaling() + c[1]
-                    };
-                    this.layoutDoc._width = (pbounds.r - pbounds.x);
-                    this.layoutDoc._height = (pbounds.b - pbounds.y);
-                    this.layoutDoc._panX = (cbounds.r + cbounds.x) / 2;
-                    this.layoutDoc._panY = (cbounds.b + cbounds.y) / 2;
-                    this.layoutDoc.x = pbounds.x;
-                    this.layoutDoc.y = pbounds.y;
+        setTimeout(action(() => {
+            this._firstRender = false;
+            this._disposers.layoutComputation = reaction(() => this.doLayoutComputation,
+                (elements) => this._layoutElements = elements || [],
+                { fireImmediately: true, name: "doLayout" });
+
+            this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
+
+            this._disposers.groupBounds = reaction(() => {
+                if (this.props.Document._isGroup && this.childDocs.length === this.childDocList?.length) {
+                    const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[WidthSym](), height: cd[HeightSym]() }));
+                    return aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding));
                 }
-            }, { fireImmediately: true });
+                return undefined;
+            },
+                (cbounds) => {
+                    if (cbounds) {
+                        const c = [NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym]() / 2, NumCast(this.layoutDoc.y) + this.layoutDoc[HeightSym]() / 2];
+                        const p = [NumCast(this.layoutDoc._panX), NumCast(this.layoutDoc._panY)];
+                        const pbounds = {
+                            x: (cbounds.x - p[0]) * this.zoomScaling() + c[0], y: (cbounds.y - p[1]) * this.zoomScaling() + c[1],
+                            r: (cbounds.r - p[0]) * this.zoomScaling() + c[0], b: (cbounds.b - p[1]) * this.zoomScaling() + c[1]
+                        };
+                        this.layoutDoc._width = (pbounds.r - pbounds.x);
+                        this.layoutDoc._height = (pbounds.b - pbounds.y);
+                        this.layoutDoc._panX = (cbounds.r + cbounds.x) / 2;
+                        this.layoutDoc._panY = (cbounds.b + cbounds.y) / 2;
+                        this.layoutDoc.x = pbounds.x;
+                        this.layoutDoc.y = pbounds.y;
+                    }
+                }, { fireImmediately: true });
+        }));
     }
 
     componentWillUnmount() {
@@ -1566,7 +1570,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             this._numLoaded++;
         }
         this._numLoaded < this.views.length && setTimeout(this.incrementalRender, 1);
-    })
+    });
 
     children = () => {
         this.incrementalRender();
@@ -1658,7 +1662,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
 
     @computed get contentScaling() {
-        if (this.props.isAnnotationOverlay && !this.props.annotationLayerHostsContent) return 0;
+        if (this._firstRender || (this.props.isAnnotationOverlay && !this.props.annotationLayerHostsContent)) return 0;
         const nw = this.nativeWidth;
         const nh = this.nativeHeight;
         const hscale = nh ? this.props.PanelHeight() / nh : 1;
@@ -1693,7 +1697,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 width: `${100 / (this.contentScaling || 1)}%`,
                 height: this.isAnnotationOverlay && this.Document.scrollHeight ? this.Document.scrollHeight : `${100 / (this.contentScaling || 1)}%`// : this.isAnnotationOverlay ? (this.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight()
             }}>
-            {this.Document._freeformLOD && !this.props.isContentActive() && !this.props.isAnnotationOverlay && this.props.renderDepth > 0 ?
+            {this._firstRender || (this.Document._freeformLOD && !this.props.isContentActive() && !this.props.isAnnotationOverlay && this.props.renderDepth > 0) ?
                 this.placeholder : this.marqueeView}
             {this.props.noOverlay ? (null) : <CollectionFreeFormOverlayView elements={this.elementFunc} />}
 
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index eb5571d16..7e6ca4248 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -32,7 +32,6 @@ interface DocumentLinksButtonProps {
     AlwaysOn?: boolean;
     InMenu?: boolean;
     StartLink?: boolean; //whether the link HAS been started (i.e. now needs to be completed)
-    ScreenToLocalTransform: () => Transform;
     ContentScaling?: () => number;
 }
 @observer
@@ -305,10 +304,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         const title = this.props.InMenu ? menuTitle : buttonTitle;
 
         //render circular tooltip if it isn't set to invisible and show the number of doc links the node has, and render inner-menu link button for starting/stopping links if currently in menu
-        return (!Array.from(this.filteredLinks).length && !this.props.AlwaysOn) || !this.props.ScreenToLocalTransform ? (null) :
-            <div className="documentLinksButton-wrapper" style={{
-                //transform: `scale(${Math.min(1, this.props.ScreenToLocalTransform().scale(this.props.ContentScaling?.() || 1).Scale)})`
-            }}>
+        return (!Array.from(this.filteredLinks).length && !this.props.AlwaysOn) ? (null) :
+            <div className="documentLinksButton-wrapper" >
                 {
                     (this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink)) ||
                         (!DocumentLinksButton.LinkEditorDocView && !this.props.InMenu) ?
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9450aedb5..91f2359af 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -871,7 +871,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             {this.hideLinkButton || this.props.renderDepth === -1 || SnappingManager.GetIsDragging() ? (null) :
                 <DocumentLinksButton View={this.props.DocumentView()}
                     ContentScaling={this.props.ContentScaling}
-                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
                     Offset={[this.topMost ? 0 : -15, undefined, undefined, this.topMost ? 10 : -20]} />
             }
             {audioView}
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index 3bdc93f10..d1b9d8cf2 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -92,12 +92,12 @@ function buildWithMiddleware(server: express.Express) {
         passport.session(),
         (req: express.Request, res: express.Response, next: express.NextFunction) => {
             res.locals.user = req.user;
-            if (req.method == 'GET') {
+            if (req.originalUrl.endsWith(".png") && req.method === 'GET') {
                 const period = 30000;
-                res.set('Cache-control', `public, max-age=${period}`)
+                res.set('Cache-control', `public, max-age=${period}`);
             } else {
                 // for the other requests set strict no caching parameters
-                res.set('Cache-control', `no-store`)
+                res.set('Cache-control', `no-store`);
             }
             next();
         }