pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: add a fake loader during website install

Browse Source 
This commit adds a fake loader during website install. [Another commit]
already added a loader during extra module install. The goal here is to
have a loader even if there is no extra module to install. This should
make the user think the install is faster and prevent him from leaving.

This commits also improves the loader when there are extra modules to
install. We split the loader in two parts: one for the modules install
(70%) and another for the rest of the install (30%).

Note that to test this feature properly, you need to be in a multiple
workers environment.

[Another commit]: https://github.com/odoo/odoo/commit/ab6564be94533a64a0a942202f0860423ec7dc4d

task-3557675

Part-of: odoo/odoo#138921
This commit is contained in:
Guillaume-gdi
2023-11-07 17:57:09 +00:00
parent ee2fe22db8
commit ebd09603c1
2 changed files with 67 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/components/website_loader/website_loader.js
+60 -4
View File
@@ -15,6 +15,7 @@ export class WebsiteLoader extends Component {
showTips: false,
selectedFeatures: [],
showWaitingMessages: false,
progressPercentage: 0,
};
const defaultMessage = {
title: _t("Building your website."),
@@ -27,7 +28,7 @@ export class WebsiteLoader extends Component {
});
this.waitingMessages = useState([ defaultMessage ]);
this.currentWaitingMessage = useState({ ...defaultMessage });
this.featuresInstallInfo = useState({ nbInstalled: 0, total: undefined });
this.featuresInstallInfo = { nbInstalled: 0, total: undefined };
useEffect(
(selectedFeatures) => {
@@ -40,7 +41,10 @@ export class WebsiteLoader extends Component {
// and already installed
this.trackModules(selectedFeatures).catch(console.error);
return () => clearTimeout(this.trackModulesTimeout);
return () => {
clearTimeout(this.trackModulesTimeout);
clearInterval(this.updateProgressInterval);
};
}
},
() => [this.state.selectedFeatures]
@@ -71,11 +75,21 @@ export class WebsiteLoader extends Component {
(isVisible) => {
if (isVisible) {
window.addEventListener("beforeunload", this.showRefreshConfirmation);
if (!this.state.selectedFeatures || this.state.selectedFeatures.length === 0) {
// If there is no feature selected, we fake the progress
// for theme installation and configurator_apply. If
// there is at least 1 feature selected, the progress
// bar will be initialized in trackModules().
this.initProgressBar();
}
} else {
window.removeEventListener("beforeunload", this.showRefreshConfirmation);
}
return () => window.removeEventListener("beforeunload", this.showRefreshConfirmation);
return () => {
window.removeEventListener("beforeunload", this.showRefreshConfirmation);
clearInterval(this.updateProgressInterval);
};
},
() => [this.state.isVisible]
);
@@ -94,6 +108,7 @@ export class WebsiteLoader extends Component {
}
clearInterval(messagesInterval);
clearTimeout(this.trackModulesTimeout);
clearInterval(this.updateProgressInterval);
});
// Action needed if the app automatically refreshes or redirects the
// page without hiding/removing the WebsiteLoader. This should be
@@ -103,6 +118,46 @@ export class WebsiteLoader extends Component {
});
}
/**
* Initializes the progress bar.
*/
initProgressBar() {
if (this.updateProgressInterval) {
return;
}
// The progress speed decreases as it approaches its limit. This way,
// users have the feeling that the website creation progressing is fast
// and we prevent them from leaving the page too early (because they
// already did XX% of the process).
// If there is no module to install, we fake the progress from 0 to 100.
// If there is at least 1 module to install, we take 70% of the progress
// bar that we divide by the number of modules to install. We fake the
// progress of each module individually and when all modules are
// installed, we fake the progress of the remaining 30%.
const nbModulesToInstall = this.featuresInstallInfo.total || 0;
const isSomethingToInstall = nbModulesToInstall > 0;
let currentProgress = 0;
// This controls the speed of the progress bar.
const progressStep = isSomethingToInstall ? 0.04 : 0.02;
let progressForAfterModules = isSomethingToInstall ? 30 : 100;
let progressForAllModules = 100 - progressForAfterModules;
let lastTotalInstalled = 0;
let progressPerModule = isSomethingToInstall ?
progressForAllModules / nbModulesToInstall : 0;
this.updateProgressInterval = setInterval(() => {
if (this.featuresInstallInfo.nbInstalled !== lastTotalInstalled) {
// A module just finished its install.
currentProgress = 0;
lastTotalInstalled = this.featuresInstallInfo.nbInstalled;
}
currentProgress += progressStep;
const limit = this.featuresInstallInfo.nbInstalled === nbModulesToInstall ?
progressForAfterModules : progressPerModule;
this.state.progressPercentage = (lastTotalInstalled * progressPerModule) +
Math.atan(currentProgress) / (Math.PI / 2) * limit;
}, 100);
}
/**
* Makes a RPC call to track the features and dependencies being installed
* and, as long as the number of features installed is different from the
@@ -121,8 +176,9 @@ export class WebsiteLoader extends Component {
);
if (!this.featuresInstallInfo.total
|| this.featuresInstallInfo.nbInstalled !== installInfo.nbInstalled) {
Object.assign(this.featuresInstallInfo, installInfo);
this.featuresInstallInfo = installInfo;
}
this.initProgressBar();
if (this.featuresInstallInfo.nbInstalled !== this.featuresInstallInfo.total) {
this.trackModulesTimeout = setTimeout(() => this.trackModules(selectedFeatures), 1000);
}
addons/website/static/src/components/website_loader/website_loader.xml
+7 -7
View File
@@ -18,13 +18,13 @@
<br/>pointer to build the perfect page in 7 steps.
</t>
</p>
<div t-if="featuresInstallInfo.total > 0"
class="o_website_loader_progress progress rounded-pill mt-3">
<div role="progressbar" aria-label="Installing your features"
class="progress-bar bg-success progress-bar-striped progress-bar-animated rounded-pill"
t-att-aria-valuemax="featuresInstallInfo.total"
t-att-aria-valuenow="featuresInstallInfo.nbInstalled"
t-attf-style="width: #{featuresInstallInfo.nbInstalled * 100 / featuresInstallInfo.total}%"/>
<div class="o_website_loader_progress progress rounded-pill mt-3">
<div role="progressbar"
aria-label="Installing your features"
class="progress-bar bg-success progress-bar-striped progress-bar-animated rounded-pill"
t-att-aria-valuemax="100"
t-att-aria-valuenow="state.progressPercentage"
t-attf-style="width: #{state.progressPercentage}%"/>
</div>
</div>
</t>