IDE启动耗时太长,新增加载动画.

This commit is contained in:
chriswang521 2023-11-14 15:59:23 +08:00
parent 9ec3e5a9c9
commit 9a2320b0e1
4 changed files with 63 additions and 1 deletions

View File

@ -5,8 +5,38 @@
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'self'; frame-src 'self' vscode-webview:; object-src 'self'; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' https: ws:; font-src 'self' https: vscode-remote-resource:;">
<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types amdLoader cellRendererEditorText defaultWorkerFactory diffEditorWidget editorGhostText domLineBreaksComputer editorViewLayer diffReview dompurify notebookRenderer safeInnerHtml standaloneColorizer tokenizeToString;">
<style>
#loader {
border: 16px solid rgba(204,204,204,0.5);
border-radius: 50%;
border-top: 16px solid rgba(0,122,204,0.8);
width: 50px;
height: 50px;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body aria-label="">
<div id="loader"></div>
</body>
<!-- Init Bootstrap Helpers -->

View File

@ -4,8 +4,38 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https:;">
<style>
#loader {
border: 16px solid rgba(204,204,204,0.5);
border-radius: 50%;
border-top: 16px solid rgba(0,122,204,0.8);
width: 50px;
height: 50px;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body aria-label="">
<div id="loader"></div>
<div id="process-list"></div>
</body>

View File

@ -292,6 +292,8 @@ class ProcessExplorer {
}
private async createProcessTree(processRoots: MachineProcessInformation[]): Promise<void> {
document.getElementById('loader')?.remove();
const container = document.getElementById('process-list');
if (!container) {
return;

View File

@ -307,7 +307,7 @@ export class Workbench extends Layout {
}
private renderWorkbench(instantiationService: IInstantiationService, notificationService: NotificationService, storageService: IStorageService, configurationService: IConfigurationService): void {
document.getElementById('loader')?.remove();
// ARIA
setARIAContainer(this.container);