mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

add loading indicator (#5237)

Browse Source
This commit is contained in:
Jack Kavanagh 2022-10-03 16:57:27 +02:00 committed by GitHub
parent 37a6c83c5a
commit a94c488410
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/insomnia/src/index.html
View File

@ -1,26 +1,41 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta
http-equiv="Content-Security-Policy"
content="font-src 'self' data:; connect-src * data:; default-src * insomnia://*; img-src blob: data: * insomnia://*; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src blob: data: mediastream: * insomnia://*;"
/>
</head>
<body>
<div id="root"></div>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy"
content="font-src 'self' data:; connect-src * data:; default-src * insomnia://*; img-src blob: data: * insomnia://*; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src blob: data: mediastream: * insomnia://*;" />
</head>
<body>
<div id="root">
<div
id="dropdowns-container"
id="app-loading-indicator"
style="
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
"
>
<img src="./ui/images/insomnia-logo.svg" alt="Insomnia">
</div>
</div>
<div id="dropdowns-container" style="
z-index: 99999;
position: fixed;
right: -90000px;
top: -90000px;
width: 100vw;
height: 100vh;
"
></div>
<div id="graphql-explorer-container"></div>
<script src="./renderer.ts" type="module"></script>
</body>
">
</div>
<div id="graphql-explorer-container"></div>
<script src="./renderer.ts" type="module"></script>
</body>
</html>

24
packages/insomnia/src/ui/components/wrapper.tsx
View File

@ -96,6 +96,22 @@ preloadWrapperDebug();
preloadWrapperDesign();
preloadWrapperUnitTest();
const LoadingIndicator = () => (<div
id="app-loading-indicator"
style={{
position: 'fixed',
top: '0',
left: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
}}
>
<img src="./ui/images/insomnia-logo.svg" alt="Insomnia" />
</div>);
const ActivityRouter = () => {
const selectedActivity = useSelector(selectActiveActivity);
const activeWorkspace = useSelector(selectActiveWorkspace);
@ -385,7 +401,7 @@ export class WrapperClass extends PureComponent<Props, State> {
<Route
path="*"
element={
<Suspense fallback={<div />}>
<Suspense fallback={<LoadingIndicator />}>
<WrapperHome
vcs={vcs}
/>
@ -395,7 +411,7 @@ export class WrapperClass extends PureComponent<Props, State> {
<Route
path={ACTIVITY_UNIT_TEST}
element={
<Suspense fallback={<div />}>
<Suspense fallback={<LoadingIndicator />}>
<WrapperUnitTest
gitSyncDropdown={gitSyncDropdown}
handleActivityChange={this._handleWorkspaceActivityChange}
@ -406,7 +422,7 @@ export class WrapperClass extends PureComponent<Props, State> {
<Route
path={ACTIVITY_SPEC}
element={
<Suspense fallback={<div />}>
<Suspense fallback={<LoadingIndicator />}>
<WrapperDesign
gitSyncDropdown={gitSyncDropdown}
handleActivityChange={this._handleWorkspaceActivityChange}
@ -417,7 +433,7 @@ export class WrapperClass extends PureComponent<Props, State> {
<Route
path={ACTIVITY_DEBUG}
element={
<Suspense fallback={<div />}>
<Suspense fallback={<LoadingIndicator />}>
<WrapperDebug
gitSyncDropdown={gitSyncDropdown}
handleActivityChange={this._handleWorkspaceActivityChange}