@thoughtspot/visual-embed-sdk 1.24.0-preRender.1 → 1.24.0-preRender.3

package/dist/tsembed.js

@@ -268,15 +268,42 @@
         }
         return obj;
     }
+    /**
+     * Sets the specified style properties on an HTML element.
+     *
+     * @param {HTMLElement} element - The HTML element to which the styles should be applied.
+     * @param {Partial<CSSStyleDeclaration>} styleProperties - An object containing style
+     * property names and their values.
+     * @example
+     * // Apply styles to an element
+     * const element = document.getElementById('myElement');
+     * const styles = {
+     *   backgroundColor: 'red',
+     *   fontSize: '16px',
+     * };
+     * setStyleProperties(element, styles);
+     */
     const setStyleProperties = (element, styleProperties) => {
-        if (!element || !styleProperties)
+        if (!(element === null || element === void 0 ? void 0 : element.style))
             return;
         Object.keys(styleProperties).forEach((styleProperty) => {
             element.style[styleProperty] = styleProperties[styleProperty].toString();
         });
     };
+    /**
+     * Removes specified style properties from an HTML element.
+     *
+     * @param {HTMLElement} element - The HTML element from which the styles should be removed.
+     * @param {string[]} styleProperties - An array of style property names to be removed.
+     * @example
+     * // Remove styles from an element
+     * const element = document.getElementById('myElement');
+     * element.style.backgroundColor = 'red';
+     * const propertiesToRemove = ['backgroundColor'];
+     * removeStyleProperties(element, propertiesToRemove);
+     */
     const removeStyleProperties = (element, styleProperties) => {
-        if (!element || !styleProperties)
+        if (!(element === null || element === void 0 ? void 0 : element.style))
             return;
         styleProperties.forEach((styleProperty) => {
             element.style.removeProperty(styleProperty);
@@ -11507,7 +11534,7 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
         });
     }
 
-    var name="@thoughtspot/visual-embed-sdk";var version="1.24.0-preRender.1";var description="ThoughtSpot Embed SDK";var module="lib/src/index.js";var main="dist/tsembed.js";var types="lib/src/index.d.ts";var files=["dist/**","lib/**","src/**","cjs/**"];var exports$1={".":{"import":"./lib/src/index.js",require:"./cjs/src/index.js",types:"./lib/src/index.d.ts"},"./react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"},"./lib/src/react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"}};var typesVersions={"*":{react:["./lib/src/react/all-types-export.d.ts"]}};var scripts={lint:"eslint 'src/**'","lint:fix":"eslint 'src/**/*.*' --fix",tsc:"tsc -p . --incremental false; tsc -p . --incremental false --module commonjs --outDir cjs",start:"gatsby develop","build:gatsby":"npm run clean:gatsby && gatsby build --prefix-paths","build:gatsby:noprefix":"npm run clean:gatsby && gatsby build","serve:gatsby":"gatsby serve","clean:gatsby":"gatsby clean","build-and-publish":"npm run build:gatsby && npm run publish","bundle-dts-file":"dts-bundle --name @thoughtspot/visual-embed-sdk --out visual-embed-sdk.d.ts --main lib/src/index.d.ts","bundle-dts":"dts-bundle --name ../../dist/visual-embed-sdk --main lib/src/index.d.ts --outputAsModuleFolder=true","bundle-dts-react":"dts-bundle --name ../../../dist/visual-embed-sdk-react --main lib/src/react/index.d.ts --outputAsModuleFolder=true","bundle-dts-react-full":"dts-bundle --name ../../../dist/visual-embed-sdk-react-full --main lib/src/react/all-types-export.d.ts --outputAsModuleFolder=true",build:"rollup -c",watch:"rollup -cw","docs-cmd":"node scripts/gatsby-commands.js",docgen:"typedoc --tsconfig tsconfig.json --theme typedoc-theme","test-sdk":"jest -c jest.config.sdk.js --runInBand","test-docs":"jest -c jest.config.docs.js",test:"npm run test-sdk && npm run test-docs",posttest:"cat ./coverage/sdk/lcov.info | coveralls","is-publish-allowed":"node scripts/is-publish-allowed.js",prepublishOnly:"npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build","check-size":"npm run build && size-limit","publish-dev":"npm publish --tag dev","publish-prod":"npm publish --tag latest"};var peerDependencies={react:"> 16.8.0","react-dom":"> 16.8.0"};var dependencies={algoliasearch:"^4.10.5",classnames:"^2.3.1",dompurify:"^2.3.4","eslint-plugin-comment-length":"^0.9.2","eslint-plugin-jsdoc":"^40.1.0",eventemitter3:"^4.0.7","gatsby-plugin-vercel":"^1.0.3","html-react-parser":"^1.4.12",lodash:"^4.17.21","mixpanel-browser":"^2.45.0","ts-deepmerge":"^6.0.2",tslib:"^2.5.3","use-deep-compare-effect":"^1.8.1"};var devDependencies={"@mdx-js/mdx":"^1.6.22","@mdx-js/react":"^1.6.22","@react-icons/all-files":"^4.1.0","@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-replace":"^5.0.2","@size-limit/preset-big-lib":"^8.2.6","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.8","@types/jest":"^22.2.3","@types/mixpanel-browser":"^2.35.6","@types/react-test-renderer":"^17.0.1","@typescript-eslint/eslint-plugin":"^4.6.0","@typescript-eslint/parser":"^4.6.0",asciidoctor:"^2.2.1","babel-jest":"^26.6.3","babel-preset-gatsby":"^1.10.0","command-line-args":"^5.1.1",coveralls:"^3.1.0","current-git-branch":"^1.1.0","dts-bundle":"^0.7.3",eslint:"^7.12.1","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.15.0","eslint-import-resolver-typescript":"^2.3.0","eslint-plugin-import":"^2.22.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react-hooks":"^4.2.0","fs-extra":"^10.0.0",gatsby:"3.13.1","gatsby-plugin-algolia":"^0.22.2","gatsby-plugin-catch-links":"^3.1.0","gatsby-plugin-env-variables":"^2.1.0","gatsby-plugin-intl":"^0.3.3","gatsby-plugin-manifest":"^3.2.0","gatsby-plugin-output":"^0.1.3","gatsby-plugin-sass":"6.7.0","gatsby-plugin-sitemap":"^4.10.0","gatsby-source-filesystem":"3.1.0","gatsby-transformer-asciidoc":"2.1.0","gatsby-transformer-rehype":"2.0.0","gh-pages":"^3.1.0","highlight.js":"^10.6.0","html-to-text":"^8.0.0","identity-obj-proxy":"^3.0.0","istanbul-merge":"^1.1.1",jest:"^26.6.3","jest-fetch-mock":"^3.0.3",jsdom:"^17.0.0","node-sass":"^8.0.0",prettier:"2.1.2",react:"^16.14.0","react-dom":"^16.14.0","react-resizable":"^1.11.0","react-resize-detector":"^6.6.0","react-test-renderer":"^17.0.2","react-use-flexsearch":"^0.1.1",rollup:"2.30.0","rollup-plugin-typescript2":"0.27.3","ts-jest":"^26.5.5","ts-loader":"8.0.4",typedoc:"0.21.6","typedoc-plugin-toc-group":"thoughtspot/typedoc-plugin-toc-group",typescript:"^4.9.4","url-search-params-polyfill":"^8.1.0",util:"^0.12.4"};var author="ThoughtSpot";var email="support@thoughtspot.com";var license="ThoughtSpot Development Tools End User License Agreement";var directories={lib:"lib"};var repository={type:"git",url:"git+https://github.com/thoughtspot/visual-embed-sdk.git"};var publishConfig={registry:"https://registry.npmjs.org"};var keywords=["thoughtspot","everywhere","embed","sdk","analytics"];var bugs={url:"https://github.com/thoughtspot/visual-embed-sdk/issues"};var homepage="https://github.com/thoughtspot/visual-embed-sdk#readme";var globals={window:{}};var pkgInfo = {name:name,version:version,description:description,module:module,main:main,types:types,files:files,exports:exports$1,typesVersions:typesVersions,"size-limit":[{path:"dist/tsembed.js",limit:"40 kB"}],scripts:scripts,peerDependencies:peerDependencies,dependencies:dependencies,devDependencies:devDependencies,author:author,email:email,license:license,directories:directories,repository:repository,publishConfig:publishConfig,keywords:keywords,bugs:bugs,homepage:homepage,globals:globals};
+    var name="@thoughtspot/visual-embed-sdk";var version="1.24.0-preRender.3";var description="ThoughtSpot Embed SDK";var module="lib/src/index.js";var main="dist/tsembed.js";var types="lib/src/index.d.ts";var files=["dist/**","lib/**","src/**","cjs/**"];var exports$1={".":{"import":"./lib/src/index.js",require:"./cjs/src/index.js",types:"./lib/src/index.d.ts"},"./react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"},"./lib/src/react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"}};var typesVersions={"*":{react:["./lib/src/react/all-types-export.d.ts"]}};var scripts={lint:"eslint 'src/**'","lint:fix":"eslint 'src/**/*.*' --fix",tsc:"tsc -p . --incremental false; tsc -p . --incremental false --module commonjs --outDir cjs",start:"gatsby develop","build:gatsby":"npm run clean:gatsby && gatsby build --prefix-paths","build:gatsby:noprefix":"npm run clean:gatsby && gatsby build","serve:gatsby":"gatsby serve","clean:gatsby":"gatsby clean","build-and-publish":"npm run build:gatsby && npm run publish","bundle-dts-file":"dts-bundle --name @thoughtspot/visual-embed-sdk --out visual-embed-sdk.d.ts --main lib/src/index.d.ts","bundle-dts":"dts-bundle --name ../../dist/visual-embed-sdk --main lib/src/index.d.ts --outputAsModuleFolder=true","bundle-dts-react":"dts-bundle --name ../../../dist/visual-embed-sdk-react --main lib/src/react/index.d.ts --outputAsModuleFolder=true","bundle-dts-react-full":"dts-bundle --name ../../../dist/visual-embed-sdk-react-full --main lib/src/react/all-types-export.d.ts --outputAsModuleFolder=true",build:"rollup -c",watch:"rollup -cw","docs-cmd":"node scripts/gatsby-commands.js",docgen:"typedoc --tsconfig tsconfig.json --theme typedoc-theme","test-sdk":"jest -c jest.config.sdk.js --runInBand","test-docs":"jest -c jest.config.docs.js",test:"npm run test-sdk && npm run test-docs",posttest:"cat ./coverage/sdk/lcov.info | coveralls","is-publish-allowed":"node scripts/is-publish-allowed.js",prepublishOnly:"npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build","check-size":"npm run build && size-limit","publish-dev":"npm publish --tag dev","publish-prod":"npm publish --tag latest"};var peerDependencies={react:"> 16.8.0","react-dom":"> 16.8.0"};var dependencies={algoliasearch:"^4.10.5",classnames:"^2.3.1",dompurify:"^2.3.4","eslint-plugin-comment-length":"^0.9.2","eslint-plugin-jsdoc":"^40.1.0",eventemitter3:"^4.0.7","gatsby-plugin-vercel":"^1.0.3","html-react-parser":"^1.4.12",lodash:"^4.17.21","mixpanel-browser":"^2.45.0","ts-deepmerge":"^6.0.2",tslib:"^2.5.3","use-deep-compare-effect":"^1.8.1"};var devDependencies={"@mdx-js/mdx":"^1.6.22","@mdx-js/react":"^1.6.22","@react-icons/all-files":"^4.1.0","@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-replace":"^5.0.2","@size-limit/preset-big-lib":"^8.2.6","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.8","@types/jest":"^22.2.3","@types/mixpanel-browser":"^2.35.6","@types/react-test-renderer":"^17.0.1","@typescript-eslint/eslint-plugin":"^4.6.0","@typescript-eslint/parser":"^4.6.0",asciidoctor:"^2.2.1","babel-jest":"^26.6.3","babel-preset-gatsby":"^1.10.0","command-line-args":"^5.1.1",coveralls:"^3.1.0","current-git-branch":"^1.1.0","dts-bundle":"^0.7.3",eslint:"^7.12.1","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.15.0","eslint-import-resolver-typescript":"^2.3.0","eslint-plugin-import":"^2.22.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react-hooks":"^4.2.0","fs-extra":"^10.0.0",gatsby:"3.13.1","gatsby-plugin-algolia":"^0.22.2","gatsby-plugin-catch-links":"^3.1.0","gatsby-plugin-env-variables":"^2.1.0","gatsby-plugin-intl":"^0.3.3","gatsby-plugin-manifest":"^3.2.0","gatsby-plugin-output":"^0.1.3","gatsby-plugin-sass":"6.7.0","gatsby-plugin-sitemap":"^4.10.0","gatsby-source-filesystem":"3.1.0","gatsby-transformer-asciidoc":"2.1.0","gatsby-transformer-rehype":"2.0.0","gh-pages":"^3.1.0","highlight.js":"^10.6.0","html-to-text":"^8.0.0","identity-obj-proxy":"^3.0.0","istanbul-merge":"^1.1.1",jest:"^26.6.3","jest-fetch-mock":"^3.0.3",jsdom:"^17.0.0","node-sass":"^8.0.0",prettier:"2.1.2",react:"^16.14.0","react-dom":"^16.14.0","react-resizable":"^1.11.0","react-resize-detector":"^6.6.0","react-test-renderer":"^17.0.2","react-use-flexsearch":"^0.1.1",rollup:"2.30.0","rollup-plugin-typescript2":"0.27.3","ts-jest":"^26.5.5","ts-loader":"8.0.4",typedoc:"0.21.6","typedoc-plugin-toc-group":"thoughtspot/typedoc-plugin-toc-group",typescript:"^4.9.4","url-search-params-polyfill":"^8.1.0",util:"^0.12.4"};var author="ThoughtSpot";var email="support@thoughtspot.com";var license="ThoughtSpot Development Tools End User License Agreement";var directories={lib:"lib"};var repository={type:"git",url:"git+https://github.com/thoughtspot/visual-embed-sdk.git"};var publishConfig={registry:"https://registry.npmjs.org"};var keywords=["thoughtspot","everywhere","embed","sdk","analytics"];var bugs={url:"https://github.com/thoughtspot/visual-embed-sdk/issues"};var homepage="https://github.com/thoughtspot/visual-embed-sdk#readme";var globals={window:{}};var pkgInfo = {name:name,version:version,description:description,module:module,main:main,types:types,files:files,exports:exports$1,typesVersions:typesVersions,"size-limit":[{path:"dist/tsembed.js",limit:"40 kB"}],scripts:scripts,peerDependencies:peerDependencies,dependencies:dependencies,devDependencies:devDependencies,author:author,email:email,license:license,directories:directories,repository:repository,publishConfig:publishConfig,keywords:keywords,bugs:bugs,homepage:homepage,globals:globals};
 
     /**
      * Copyright (c) 2022
@@ -11607,6 +11634,7 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
                 this.on(exports.EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
                 this.on(exports.EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
             };
+            this.showPreRenderByDefault = false;
             this.el = getDOMNode(domSelector);
             // TODO: handle error
             this.embedConfig = getEmbedConfig();
@@ -11893,12 +11921,12 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
             iFrame.name = 'ThoughtSpot Embedded Analytics';
             return iFrame;
         }
-        handleInsertionIntoDOM(child, showPreRenderByDefault = false) {
+        handleInsertionIntoDOM(child) {
             if (this.isPreRendered) {
-                this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage, showPreRenderByDefault);
+                this.insertIntoDOMForPreRender(child);
             }
             else {
-                this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+                this.insertIntoDOM(child);
             }
         }
         /**
@@ -11906,9 +11934,8 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
          * event listeners.
          *
          * @param url - The URL of the embedded ThoughtSpot app.
-         * @param showPreRenderByDefault - The flag to show the preRender by default.
          */
-        async renderIFrame(url, showPreRenderByDefault = false) {
+        async renderIFrame(url) {
             if (this.isError) {
                 return null;
             }
@@ -11928,7 +11955,7 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
                 uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
                 return (_a = getAuthPromise()) === null || _a === void 0 ? void 0 : _a.then((isLoggedIn) => {
                     if (!isLoggedIn) {
-                        this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage, showPreRenderByDefault);
+                        this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
                         return;
                     }
                     this.iFrame = this.iFrame || this.createIframeEl(url);
@@ -11950,7 +11977,7 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
-                    this.handleInsertionIntoDOM(this.iFrame, showPreRenderByDefault);
+                    this.handleInsertionIntoDOM(this.iFrame);
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -11968,45 +11995,28 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
                 });
             });
         }
-        getPreRenderIds() {
-            return {
-                wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
-                shield: `tsEmbed-pre-render-shield-${this.viewConfig.preRenderId}`,
-                child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
-            };
-        }
-        createPreRenderWrapper(child) {
+        createPreRenderWrapper() {
+            var _a;
             if (!this.viewConfig.preRenderId) {
-                throw new Error('PreRender id is required');
+                throw new Error('PreRender id is required to create PreRender wrapper');
             }
             const preRenderIds = this.getPreRenderIds();
-            [preRenderIds.wrapper, preRenderIds.shield, preRenderIds.child]
-                .map((id) => document.getElementById(id))
-                .filter((element) => element)
-                .forEach((existingElement) => existingElement.remove());
+            (_a = document.getElementById(preRenderIds.wrapper)) === null || _a === void 0 ? void 0 : _a.remove();
             const preRenderWrapper = document.createElement('div');
             preRenderWrapper.id = preRenderIds.wrapper;
-            setStyleProperties(preRenderWrapper, { position: 'absolute', width: '100vw', height: '100vh' });
-            // const preRenderShield = document.createElement('div');
-            // preRenderShield.id = preRenderIds.shield;
-            // setStyleProperties(preRenderShield, { position: 'absolute',
-            // width: '100%', height: '100%' });
-            child.id = preRenderIds.child;
-            preRenderWrapper.appendChild(child);
-            // preRenderWrapper.appendChild(preRenderShield);
-            this.preRenderWrapper = preRenderWrapper;
-            // this.preRenderShield = preRenderShield;
-            this.preRenderChild = child;
+            const initialPreRenderWrapperStyle = {
+                position: 'absolute',
+                width: '100vw',
+                height: '100vh',
+            };
+            setStyleProperties(preRenderWrapper, initialPreRenderWrapperStyle);
             return preRenderWrapper;
         }
         connectPreRendered() {
             const preRenderIds = this.getPreRenderIds();
             this.preRenderWrapper = this.preRenderWrapper
                 || document.getElementById(preRenderIds.wrapper);
-            // this.preRenderShield = this.preRenderShield
-            //     || document.getElementById(preRenderIds.shield);
-            this.preRenderChild = this.preRenderChild
-                || document.getElementById(preRenderIds.child);
+            this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
             if (this.preRenderWrapper && this.preRenderChild) {
                 this.isPreRendered = true;
                 this.iFrame = this.preRenderChild;
@@ -12014,79 +12024,45 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
             return this.isPreRenderAvailable();
         }
         isPreRenderAvailable() {
-            return this.isPreRendered;
+            return this.isPreRendered && Boolean(this.preRenderWrapper && this.preRenderChild);
         }
-        insertIntoDOMForPreRender(child, showPreRenderByDefault = false) {
-            let childNode;
+        createPreRenderChild(child) {
+            var _a;
+            const preRenderIds = this.getPreRenderIds();
+            (_a = document.getElementById(preRenderIds.child)) === null || _a === void 0 ? void 0 : _a.remove();
+            if (child instanceof HTMLElement) {
+                child.id = preRenderIds.child;
+                return child;
+            }
+            const divChildNode = document.createElement('div');
+            setStyleProperties(divChildNode, { width: '100%', height: '100%' });
+            divChildNode.id = preRenderIds.child;
             if (typeof child === 'string') {
-                const divChildNode = document.createElement('div');
                 divChildNode.innerHTML = child;
-                childNode = divChildNode;
             }
             else {
-                childNode = child;
+                divChildNode.appendChild(child);
+            }
+            return divChildNode;
+        }
+        insertIntoDOMForPreRender(child) {
+            const preRenderChild = this.createPreRenderChild(child);
+            const preRenderWrapper = this.createPreRenderWrapper();
+            preRenderWrapper.appendChild(preRenderChild);
+            this.preRenderChild = preRenderChild;
+            this.preRenderWrapper = preRenderWrapper;
+            if (preRenderChild instanceof HTMLIFrameElement) {
+                this.iFrame = preRenderChild;
             }
-            const preRenderWrapper = this.createPreRenderWrapper(childNode);
-            if (showPreRenderByDefault) {
+            if (this.showPreRenderByDefault) {
                 this.showPreRender();
             }
             else {
                 this.hidePreRender();
             }
+            this.insertedDomEl = preRenderWrapper;
             document.body.appendChild(preRenderWrapper);
         }
-        hidePreRender() {
-            if (!this.isPreRenderAvailable()) {
-                // if the embed component is not preRendered , nothing to hide
-                console.log('No preRender found, not hiding ');
-                return;
-            }
-            setStyleProperties(this.preRenderWrapper, {
-                opacity: '0',
-                pointerEvents: 'none',
-                zIndex: '-1000',
-                position: 'absolute ',
-                top: '0',
-                left: '0',
-            });
-            const childBoundingRect = this.preRenderChild.getBoundingClientRect();
-            // setStyleProperties(this.preRenderShield, {
-            //     opacity: '0',
-            //     pointerEvents: 'none',
-            //     zIndex: '1',
-            //     width: `${childBoundingRect.width}px`,
-            //     height: `${childBoundingRect.height}px`,
-            //     position: 'absolute',
-            //     top: '0',
-            //     left: '0',
-            // });
-            this.unsubscribeToEvents();
-        }
-        showPreRender() {
-            if (!this.isPreRenderAvailable()) {
-                const isAvailable = this.connectPreRendered();
-                if (!isAvailable) {
-                    // if the Embed component is nor preRendered , Render it now and
-                    // show it (hide is defalt behaviour)
-                    console.log('No preRender found, creating new ');
-                    this.preRender(true);
-                    return;
-                }
-            }
-            this.syncPreRenderStyle();
-            removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
-            // setStyleProperties(this.preRenderShield, { zIndex: '-1' });
-            this.subscribeToEvents();
-        }
-        syncPreRenderStyle() {
-            if (!this.el) {
-                throw new Error('Embed element is not defined');
-            }
-            const elBoundingClient = this.el.getBoundingClientRect();
-            setStyleProperties(this.preRenderWrapper, {
-                top: `${elBoundingClient.y}px`, left: `${elBoundingClient.x}px`, width: `${elBoundingClient.width}px`, height: `${elBoundingClient.height}px`,
-            });
-        }
         insertIntoDOM(child) {
             var _a;
             if (this.viewConfig.insertAsSibling) {
@@ -12304,10 +12280,16 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
         /**
          * Creates the preRender shell
          *
-         * @param showPreRenderByDefault
+         * @param showPreRenderByDefault - Show the preRender after render, hidden by default
          */
         preRender(showPreRenderByDefault = false) {
+            if (!this.viewConfig.preRenderId) {
+                console.error('PreRender id is required for preRender');
+                return this;
+            }
             this.isPreRendered = true;
+            this.showPreRenderByDefault = showPreRenderByDefault;
+            this.render();
             return this;
         }
         /**
@@ -12366,6 +12348,97 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
             const prerenderFrameSrc = this.getRootIframeSrc();
             return this.renderIFrame(prerenderFrameSrc);
         }
+        /**
+         * Displays the PreRender component.
+         * If the component is not preRendered, it attempts to create and render it.
+         * Also, synchronizes the style of the PreRender component with the embedding
+         * element.
+         */
+        showPreRender() {
+            if (!this.isPreRenderAvailable()) {
+                const isAvailable = this.connectPreRendered();
+                if (!isAvailable) {
+                    // if the Embed component is not preRendered , Render it now and
+                    this.preRender(true);
+                    return;
+                }
+            }
+            if (this.el) {
+                this.syncPreRenderStyle();
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.contentRect && entry.target === this.el) {
+                            setStyleProperties(this.preRenderWrapper, {
+                                width: `${entry.contentRect.width}px`,
+                                height: `${entry.contentRect.height}px`,
+                            });
+                        }
+                    });
+                });
+                this.resizeObserver.observe(this.el);
+            }
+            removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
+            this.subscribeToEvents();
+        }
+        /**
+         * Synchronizes the style properties of the PreRender component with the embedding
+         * element. This function adjusts the position, width, and height of the PreRender
+         * component
+         * to match the dimensions and position of the embedding element.
+         *
+         * @throws {Error} Throws an error if the embedding element (passed as domSelector)
+         * is not defined or not found.
+         */
+        syncPreRenderStyle() {
+            if (!this.el) {
+                throw new Error('Embed element is not defined');
+            }
+            const elBoundingClient = this.el.getBoundingClientRect();
+            setStyleProperties(this.preRenderWrapper, {
+                top: `${elBoundingClient.y}px`,
+                left: `${elBoundingClient.x}px`,
+                width: `${elBoundingClient.width}px`,
+                height: `${elBoundingClient.height}px`,
+            });
+        }
+        /**
+         * Hides the PreRender component if it is available.
+         * If the component is not preRendered, it issues a warning.
+         */
+        hidePreRender() {
+            if (!this.isPreRenderAvailable()) {
+                // if the embed component is not preRendered , nothing to hide
+                console.warn('Warning: You should call PreRender before hiding it using hidePreRender.');
+                return;
+            }
+            const preRenderHideStyles = {
+                opacity: '0',
+                pointerEvents: 'none',
+                zIndex: '-1000',
+                position: 'absolute ',
+                top: '0',
+                left: '0',
+            };
+            setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+            this.unsubscribeToEvents();
+        }
+        /**
+         * Retrieves unique HTML element IDs for PreRender-related elements.
+         * These IDs are constructed based on the provided 'preRenderId' from 'viewConfig'.
+         *
+         * @returns {object} An object containing the IDs for the PreRender elements.
+         * @property {string} wrapper - The HTML element ID for the PreRender wrapper.
+         * @property {string} child - The HTML element ID for the PreRender child.
+         */
+        getPreRenderIds() {
+            return {
+                wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
+                child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
+            };
+        }
     }
     /**
      * Base class for embedding v1 experience
@@ -12383,10 +12456,9 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
          * Render the app in an iframe and set up event handlers
          *
          * @param iframeSrc
-         * @param showPreRenderByDefault - if true the preRender will be shown by default
          */
-        renderV1Embed(iframeSrc, showPreRenderByDefault = false) {
-            return this.renderIFrame(iframeSrc, showPreRenderByDefault);
+        renderV1Embed(iframeSrc) {
+            return this.renderIFrame(iframeSrc);
         }
         getRootIframeSrc() {
             const queryParams = this.getEmbedParams();
@@ -12624,17 +12696,11 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
          *
          * @param renderOptions An object containing the page ID
          * to be embedded.
-         * @param showPreRenderByDefault
          */
-        render(showPreRenderByDefault = false) {
+        render() {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src, showPreRenderByDefault);
-            return this;
-        }
-        preRender(showPreRenderByDefault = false) {
-            super.preRender(showPreRenderByDefault);
-            this.render(showPreRenderByDefault);
+            this.renderV1Embed(src);
             return this;
         }
     }
@@ -12791,15 +12857,10 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
          * @param renderOptions An object specifying the Liveboard ID,
          * visualization ID and the runtime filters.
          */
-        render(showPreRenderByDefault = false) {
+        render() {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src, showPreRenderByDefault);
-            return this;
-        }
-        preRender(showPreRenderByDefault = false) {
-            super.preRender(showPreRenderByDefault);
-            this.render(showPreRenderByDefault);
+            this.renderV1Embed(src);
             return this;
         }
         navigateToLiveboard(liveboardId, vizId, activeTabId) {
@@ -12925,14 +12986,12 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
         }
         /**
          * Render the embedded ThoughtSpot search
-         *
-         * @param showPreRenderByDefault
          */
-        render(showPreRenderByDefault = false) {
+        render() {
             super.render();
             const { answerId } = this.viewConfig;
             const src = this.getIFrameSrc(answerId);
-            this.renderIFrame(src, showPreRenderByDefault);
+            this.renderIFrame(src);
             getAuthPromise().then(() => {
                 if (checkReleaseVersionInBeta(getReleaseVersion(), getEmbedConfig().suppressSearchEmbedBetaWarning)) {
                     alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);
@@ -12940,11 +12999,6 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
             });
             return this;
         }
-        preRender(showPreRenderByDefault = false) {
-            super.preRender(showPreRenderByDefault);
-            this.render(showPreRenderByDefault);
-            return this;
-        }
     }
 
     /**
@@ -13087,18 +13141,12 @@ mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!]
         /**
          * Render the embedded ThoughtSpot Sage
          *
-         * @param showPreRenderByDefault
          * @returns {SageEmbed} Eureka/Sage embed
          */
-        render(showPreRenderByDefault = false) {
+        render() {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src, showPreRenderByDefault);
-            return this;
-        }
-        preRender(showPreRenderByDefault = false) {
-            super.preRender(showPreRenderByDefault);
-            this.render(showPreRenderByDefault);
+            this.renderV1Embed(src);
             return this;
         }
     }