PromucFlow_constructor/app/client/public/index.html
Hetu Nandu db82cca253
fix: Refactor faster page loads (#25983)
## Description
Improve page loads by removing the blocking calls of user and tenant
information. These calls were called before any other routes would load
and that would increase the time taken for other subsequent calls.

Reasons it was needed for 
1. Branding info comes from tenant api call. This being executed later
would cause flashing of colours if branding is updated
2. Licence info comes from tenant api call. A check is needed for
licence validity and show appropriate screens instead of the app for
users
3. User info was needed to show the correct admin settings to the user

We are going to mitigate dependency 1 and 2 by hiding the ui by making
the opacity to 0 till the responses are not received. This will ensure
users don't see the screen, yet the JS is being loaded efficiently and
api calls are done earlier.
We will move the admin settings dependency to the route itself so that
other routes do not delay because of this change

#### PR fixes following issue(s)
Fixes #25586

#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change

- Chore (housekeeping or task changes that don't impact user perception)

## Testing

#### How Has This Been Tested?
Needs regression testing on EE with admin settings, branding and licence
checks
Page loads on CE and EE

- [x] Manual
- [ ] Cypress

#### Test Plan
EE:
- [ ] admin settings
- [ ] branding
- [ ] licence checks
- [ ] Page loads

CE
- [x] admin settings
- [x] Page loads
>
#### Issues raised during DP testing
No issues found during DP (CE) Testing

## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
2023-08-11 13:30:46 +05:30

220 lines
8.9 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Appsmith</title>
<style>
#loader {
position: fixed;
left: 0;
top: 0;
height: 4px;
background: #D7D7D7;
transition: all ease-in 0.3s;
}
#app-load-block {
visibility: hidden;
}
</style>
<script>
// '' (empty strings), 'false' are falsy
// could return either boolean or string based on value
const parseConfig = (config) => {
if (config.indexOf("__") === 0 || config.indexOf("$") === 0 || config.indexOf("%") === 0)
return "";
const result = config.trim();
if (result.toLowerCase() === "false" || result === "") {
return false;
} else if (result.toLowerCase() === "true") {
return true;
}
return result;
};
const CLOUD_HOSTING = parseConfig("__APPSMITH_CLOUD_HOSTING__");
const ZIPY_KEY = parseConfig("__APPSMITH_ZIPY_SDK_KEY__");
</script>
<script>
window.__APPSMITH_CHUNKS_TO_PRELOAD =
<%=
(function () {
// This code emits URLs to be preloaded as soon as the main bundle loads.
// If you code-split away some files and need to preload them as well, heres how to do that:
// 1) Give your import a name (use the `webpackChunkName` comment: `import(/* webpackChunkName: "my-name" */ "./my-file")`)
// 2) Add the name into the `chunksToPreload` array below
let chunksToPreload = {
'edit-mode': [...getChunkUrls("editor"), ...getChunkUrls("global-search")],
'view-mode': getChunkUrls("AppViewer")
};
return JSON.stringify(chunksToPreload);
function getChunkUrls(chunkName) {
return compilation.namedChunkGroups.get(chunkName).chunks.flatMap(chunk => [...chunk.files]);
}
})()
%>
</script>
<script>
if (CLOUD_HOSTING && ZIPY_KEY) {
const script = document.createElement('script');
script.crossOrigin = "anonymous";
script.defer = true;
script.src = "https://cdn.zipy.ai/sdk/v1.0/zipy.min.umd.js";
script.onload = () => {
window.zipy && window.zipy.init(ZIPY_KEY);
}
const head = document.getElementsByTagName('head')[0];
head && head.appendChild(script);
}
// This function is triggered on load of google apis javascript library
// Even though the script is loaded asynchronously, in case of firefox run on windows
// The gapi script is getting loaded even before the last script of index.html
// Hence defining this function before loading gapi
// For more info: https://github.com/appsmithorg/appsmith/issues/21033
gapiLoaded = () => {
window.googleAPIsLoaded = true;
}
onError = () => {
window.googleAPIsLoaded = false;
};
</script>
<!-- Adding this Library to access google file picker API in case of limiting google sheet access -->
<script async defer id="googleapis" src="https://apis.google.com/js/api.js" onload="gapiLoaded()"
onerror="onError()"></script>
</head>
<body class="appsmith-light-theme">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="loader" style="width: 30vw;"></div>
<!--
To keep zIndex for tooltips higher than app comments, todo remove when migrating to Tooltip2
Currently the className does not apply to the portal root, so we're unable to work with z-indexes based on that
-->
<div id="app-load-block">
<div id="header-root"></div>
<div id="root"></div>
</div>
<div id="date-picker-control" style="position: relative; z-index: 1000;"></div>
<script type="text/javascript">
// Ref: https://github.com/Modernizr/Modernizr/blob/94592f279a410436530c7c06acc42a6e90c20150/feature-detects/storage/localstorage.js
const getIsLocalStorageSupported = () => {
try {
window.localStorage.setItem("test", "testA");
window.localStorage.removeItem("test");
return true;
} catch (e) {
return false;
}
};
const isLocalStorageSupported = getIsLocalStorageSupported();
const handleLocalStorageNotSupportedError = () => {
console.error("Localstorage storage is not supported on your device.");
}
const localStorageUtil = {
getItem: (key) => {
if (!isLocalStorageSupported) {
handleLocalStorageNotSupportedError();
return;
}
return window.localStorage.getItem(key);
},
removeItem: (key) => {
if (!isLocalStorageSupported) {
handleLocalStorageNotSupportedError();
return
}
return window.localStorage.removeItem(key);
},
setItem: (key, value) => {
if (!isLocalStorageSupported) {
handleLocalStorageNotSupportedError();
return;
}
return window.localStorage.setItem(key, value);
}
};
window.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("loader").style.width = "50vw";
});
const registerPageServiceWorker = () => {
if (
"serviceWorker" in navigator
// Disable the service worker in Cypress tests. We primarily do this to make
// the Performance/LinkRelPreload_Spec.js test work (as it collects URLs all network requests,
// and service worker requests fail it.) But, anecdotally, disabling the service worker
// also seems to make the tests a bit faster, as the network load is lower.
&& !window.Cypress
) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/pageService.js").catch(error => {
console.error("Service Worker Registration failed: " + error);
});
});
}
};
registerPageServiceWorker();
</script>
<script type="text/javascript">
const LOG_LEVELS = ["debug", "error"];
const CONFIG_LOG_LEVEL_INDEX = LOG_LEVELS.indexOf(parseConfig("__APPSMITH_CLIENT_LOG_LEVEL__"));
const INTERCOM_APP_ID = parseConfig("%REACT_APP_INTERCOM_APP_ID%") || parseConfig("__APPSMITH_INTERCOM_APP_ID__");
const DISABLE_INTERCOM = parseConfig("__APPSMITH_DISABLE_INTERCOM__");
// Initialize the Intercom library
if (INTERCOM_APP_ID.length && !DISABLE_INTERCOM) {
(function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { var d = document; var i = function () { i.c(arguments); }; i.q = []; i.c = function (args) { i.q.push(args); }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/' + INTERCOM_APP_ID; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (document.readyState === 'complete') { l(); } else if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();
}
window.SENTRY_CONFIG = parseConfig("__APPSMITH_SENTRY_DSN__");
window.APPSMITH_FEATURE_CONFIGS = {
sentry: {
dsn: parseConfig("__APPSMITH_SENTRY_DSN__"),
release: parseConfig("__APPSMITH_SENTRY_RELEASE__"),
environment: parseConfig("__APPSMITH_SENTRY_ENVIRONMENT__"),
},
smartLook: {
id: parseConfig("__APPSMITH_SMART_LOOK_ID__"),
},
enableRapidAPI: parseConfig("__APPSMITH_MARKETPLACE_ENABLED__"),
segment: {
apiKey: parseConfig("__APPSMITH_SEGMENT_KEY__"),
ceKey: parseConfig("__APPSMITH_SEGMENT_CE_KEY__"),
},
fusioncharts: {
licenseKey: parseConfig("__APPSMITH_FUSIONCHARTS_LICENSE_KEY__")
},
enableMixpanel: parseConfig("__APPSMITH_SEGMENT_KEY__"),
algolia: {
apiId: parseConfig("__APPSMITH_ALGOLIA_API_ID__"),
apiKey: parseConfig("__APPSMITH_ALGOLIA_API_KEY__"),
indexName: parseConfig("__APPSMITH_ALGOLIA_SEARCH_INDEX_NAME__"),
},
logLevel: CONFIG_LOG_LEVEL_INDEX > -1 ? LOG_LEVELS[CONFIG_LOG_LEVEL_INDEX] : LOG_LEVELS[1],
cloudHosting: CLOUD_HOSTING,
enableTNCPP: parseConfig("__APPSMITH_TNC_PP__"),
appVersion: {
id: parseConfig("__APPSMITH_VERSION_ID__"),
releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__")
},
intercomAppID: INTERCOM_APP_ID,
mailEnabled: parseConfig("__APPSMITH_MAIL_ENABLED__"),
cloudServicesBaseUrl: parseConfig("__APPSMITH_CLOUD_SERVICES_BASE_URL__") || "https://cs.appsmith.com",
googleRecaptchaSiteKey: parseConfig("__APPSMITH_RECAPTCHA_SITE_KEY__"),
hideWatermark: parseConfig("__APPSMITH_HIDE_WATERMARK__"),
disableIframeWidgetSandbox: parseConfig("__APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX__"),
customerPortalUrl: parseConfig("__APPSMITH_CUSTOMER_PORTAL_URL__") || "https://customer.appsmith.com",
pricingUrl: parseConfig("__APPSMITH_PRICING_URL__") || "https://www.appsmith.com/pricing",
};
</script>
</body>
</html>