Skip to content

feat: remove progress bar after loading the Javascript #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hansl merged 2 commits into from
Mar 10, 2020
Merged

feat: remove progress bar after loading the Javascript #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b99e5bc
feat: remove progress bar after loading the Javascript
hansl Mar 10, 2020
99d1525
fixup! feat: remove progress bar after loading the Javascript
hansl Mar 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/userlib/js/bootstrap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<style>.ic_progress { display: block; margin: 50vh auto; width: 25vw; }</style>
</head>
<body>
<app id="app"><progress class="ic_progress">Loading...</progress></app>
<app id="app"><progress class="ic_progress" id="ic-progress">Loading...</progress></app>
</body>
</html>
14 changes: 12 additions & 2 deletions src/userlib/js/bootstrap/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,18 @@ function _getVariable(
}

// Retrieve and execute a JavaScript file from the server.
async function _loadJs(canisterId: string, filename: string): Promise<any> {
async function _loadJs(
canisterId: string,
filename: string,
onload = async () => {},
): Promise<any> {
const content = await window.icHttpAgent.retrieveAsset(canisterId, filename);
const js = new TextDecoder().decode(content);
const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(js);

// Run an event function so the callee can execute some code before loading the
// Javascript.
await onload();
// TODO(hansl): either get rid of eval, or rid of webpack, or make this
// work without this horrible hack.
return eval('import("' + dataUri + '")'); // tslint:disable-line
Expand Down Expand Up @@ -105,7 +113,9 @@ async function _main() {
render.render(canisterId, actor, canister);
} else {
// Load index.js from the canister and execute it.
await _loadJs(canisterId, 'index.js');
await _loadJs(canisterId, 'index.js', async () => {
document.getElementById('ic-progress')!.remove();
Copy link
Contributor

@chenyan-dfinity chenyan-dfinity Mar 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does "!" mean?

Copy link
Contributor Author

@hansl hansl Mar 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function can return HTMLElement | null, but we know it won't be null so we tell that to the type system so it accepts the return type as HTMLElement.

});
}
}
}
Expand Down