Skip to content
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

Add initial loading-screen to index.html #1825

Merged
merged 9 commits into from
Feb 3, 2024
Merged

Add initial loading-screen to index.html #1825

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4e7aec6
add initial loading-screen to index.html
SebinSong Jan 28, 2024
5a9fa89
add loader animation to index.html
SebinSong Jan 31, 2024
4522eca
fix the linter error
SebinSong Jan 31, 2024
62ff0aa
completely remove the loading screen upon ready
SebinSong Feb 1, 2024
5d1f5dd
revert back Loading.vue
SebinSong Feb 1, 2024
1fc0eaf
fix the bug / destroy the loading animation upon LOGIN_ERROR
SebinSong Feb 2, 2024
b27039f
fix the linter errors in the comment
SebinSong Feb 2, 2024
0e0ddd8
remove all console.log() for debugging
SebinSong Feb 2, 2024
3aa4fb8
resolve merge conflicts from the master
SebinSong Feb 2, 2024
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
43 changes: 43 additions & 0 deletions frontend/assets/style/components/_loading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,46 @@
50% { background-position: 100% 0; }
100% { background-position: 100% 0; }
}

.main-loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
background-color: #ededed;

&.is-removed {
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

img {
display: inline-block;
width: 2.4rem;
height: auto;
transform-origin: center center;
animation: logo-rotation 5s linear infinite;

@include from ($tablet) {
width: 3rem;
}
}

@media (prefers-color-scheme: dark) {
background-color: #2e3032;
}

@keyframes logo-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
5 changes: 5 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
<link rel="icon" href="/assets/images/group-income-icon-transparent.png" sizes="32x32">
</head>
<body>
<div id="main-loading-screen" class="main-loading-screen">
<img src="/assets/images/group-income-icon-transparent.png" alt="logo" />
</div>

<div class="modal is-active" id="fallback" style="display: none;">
<div class="modal-content">
<h1>Outdated browser</h1>
Expand All @@ -29,6 +33,7 @@ <h1>Outdated browser</h1>
<banner-general ref="bannerGeneral"></banner-general>
<navigation v-if="showNav" class="l-navigation"></navigation>
<router-view v-if="ephemeral.ready" class="l-page"></router-view>
<loading v-else class="l-page"></loading>
<modal class="l-modal"></modal>
<background-sounds></background-sounds>
<!-- we no longer use cypress-bypass-ui -->
Expand Down
10 changes: 8 additions & 2 deletions frontend/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,8 @@ async function startApp () {
// TODO/REVIEW page can load with already loggedin. -> this.$store.state.loggedIn ? 'yes' : 'no'
finishedLogin: 'no',
debouncedSyncBanner: null,
isCorrupted: false // TODO #761
isCorrupted: false, // TODO #761
ready: false
}
}
},
Expand Down Expand Up @@ -374,7 +375,12 @@ async function startApp () {
}).catch(e => {
console.error(`[main] caught ${e?.name} while fetching settings or handling a login error: ${e?.message || e}`, e)
}).finally(() => {
Vue.set(this.ephemeral, 'ready', true)
this.ephemeral.ready = true

const loadingScreenEl = document.querySelector('#main-loading-screen')
if (loadingScreenEl) {
loadingScreenEl.classList.add('is-removed')
}
Copy link
Collaborator

@snowteamer snowteamer Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This will minimize the element so that it becomes a single pixel wide. Why couldn't it be removed instead, or its display set to none? I think a clarifying comment would be useful here

Copy link
Collaborator Author

@SebinSong SebinSong Feb 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@snowteamer I think it makes sense to remove it completely instead of hiding it if there is no other cases that the app needs to display this loader screen.

})
},
computed: {
Expand Down
19 changes: 18 additions & 1 deletion frontend/views/components/Loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
.c-loading.has-text-centered(
:class='{ "c-fullView": theme === "fullView" }'
)
img.c-logo(src='/assets/images/group-income-icon-transparent.png')
h1.is-title-1 {{ title }}
p {{ text }}
</template>
Expand Down Expand Up @@ -36,12 +37,28 @@ export default ({
padding: 2rem 0;
animation: showLoading 200ms 500ms forwards;

&.c-fullView {
.c-logo {
display: none;
}

&.c-fullView,
&.l-page {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

&.l-page {
align-items: center;

.c-logo {
display: inline-block;
width: 5.5rem;
height: auto;
margin-bottom: 1.5rem;
}
}
}

@keyframes showLoading {
Expand Down
Loading