LoadingIcon improvement

• the loading progress bar.
• title attr now shows the status
This commit is contained in:
Mopsgamer 2022-10-10 19:02:24 +02:00
parent e63695e17f
commit a4dcebba7c
2 changed files with 68 additions and 17 deletions

View File

@ -6,15 +6,30 @@ const css = `/* BEGIN V2 LOADER */
}
#bd-loading-icon {
position: fixed;
bottom:5px;
right:5px;
z-index: 2147483647;
bottom: 10px;
right: 5px;
z-index: 2147483646;
display: block;
width: 20px;
height: 20px;
background-size: 100% 100%;
animation: bd-loading-animation 1.5s ease-in-out infinite;
}
#bd-loading-progress {
position: fixed;
bottom: 5px;
right:5px;
z-index: 2147483647;
width: 20px;
height: 3px;
background-color: var(--header-primary);
overflow: hidden;
}
#bd-loading-progress-bar {
background-color: #3E82E5;
width: 0%;
height: 100%;
}
@keyframes bd-loading-animation {
0% { opacity: 0.05; }
@ -32,14 +47,36 @@ loadingIcon.id = "bd-loading-icon";
loadingIcon.className = "bd-loaderv2";
loadingIcon.title = "BetterDiscord is loading...";
const loadingProgressBar = document.createElement('div');
loadingProgressBar.id = "bd-loading-progress-bar";
const loadingProgress = document.createElement('div');
loadingProgress.appendChild(loadingProgressBar);
loadingProgress.id = "bd-loading-progress";
export default class {
static setInitStatus(percent, status = "") {
return new Promise(
rs => {
if (percent > 100) percent = 100;
if (percent < 0) percent = 0;
loadingProgressBar.style.width = percent + "%";
if (status) loadingIcon.title = status;
// 60 fps, rendering wait
setTimeout(rs, 1000/60)
}
)
}
static show() {
document.body.appendChild(iconStyle);
document.body.appendChild(loadingIcon);
document.body.appendChild(loadingProgress);
}
static hide() {
if (iconStyle) iconStyle.remove();
if (loadingIcon) loadingIcon.remove();
if (loadingProgress) loadingProgress.remove();
}
}

View File

@ -27,54 +27,68 @@ export default new class Core {
Config.userData = process.env.DISCORD_USER_DATA;
Config.dataPath = process.env.BETTERDISCORD_DATA_PATH;
/**loading steps count*/
// Load css early
Logger.log("Startup", "Injecting BD Styles");
DOMManager.injectStyle("bd-stylesheet", Styles.toString());
await LoadingIcon.setInitStatus(1/15*100, "Injecting BD Styles");
Logger.log("Startup", "Initializing DataStore");
DataStore.initialize();
await LoadingIcon.setInitStatus(2/15*100, "Initializing DataStore");
Logger.log("Startup", "Initializing LocaleManager");
LocaleManager.initialize();
await LoadingIcon.setInitStatus(3/15*100, "Initializing LocaleManager");
Logger.log("Startup", "Getting update information");
this.checkForUpdate();
await LoadingIcon.setInitStatus(4/15*100, "Getting update information");
Logger.log("Startup", "Initializing Settings");
Settings.initialize();
await LoadingIcon.setInitStatus(5/15*100, "Initializing Settings");
Logger.log("Startup", "Initializing DOMManager");
DOMManager.initialize();
await LoadingIcon.setInitStatus(6/15*100, "Initializing DOMManager");
Logger.log("Startup", "Waiting for connection...");
await this.waitForConnection();
await LoadingIcon.setInitStatus(7/15*100, "Waiting for connection...");
Logger.log("Startup", "Initializing Editor");
await Editor.initialize();
await LoadingIcon.setInitStatus(8/15*100, "Initializing Editor");
Logger.log("Startup", "Initializing Builtins");
for (const module in Builtins) {
Builtins[module].initialize();
}
await LoadingIcon.setInitStatus(9/15*100, "Initializing Builtins");
Logger.log("Startup", "Loading Plugins");
// const pluginErrors = [];
const pluginErrors = PluginManager.initialize();
await LoadingIcon.setInitStatus(10/15*100);
Logger.log("Startup", "Loading Themes");
// const themeErrors = [];
const themeErrors = ThemeManager.initialize();
await LoadingIcon.setInitStatus(11/15*100);
Logger.log("Startup", "Initializing AddonUpdater");
AddonUpdater.initialize();
await LoadingIcon.setInitStatus(12/15*100);
Logger.log("Startup", "Removing Loading Icon");
LoadingIcon.hide();
// Show loading errors
Logger.log("Startup", "Collecting Startup Errors");
Modals.showAddonErrors({plugins: pluginErrors, themes: themeErrors});
const previousVersion = DataStore.getBDData("version");
if (Config.version > previousVersion) {
const md = [Changelog.description];