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 7 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
36 changes: 36 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,39 @@
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;

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

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

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

@keyframes logo-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
4 changes: 4 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 Down
22 changes: 19 additions & 3 deletions frontend/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import '~/shared/domains/chelonia/chelonia.js'
import { CONTRACT_IS_SYNCING } from '~/shared/domains/chelonia/events.js'
import { NOTIFICATION_TYPE, REQUEST_TYPE } from '../shared/pubsub.js'
import * as Common from '@common/common.js'
import { LOGIN, LOGOUT, SWITCH_GROUP, THEME_CHANGE, CHATROOM_USER_TYPING, CHATROOM_USER_STOP_TYPING } from './utils/events.js'
import { LOGIN, LOGOUT, LOGIN_ERROR, SWITCH_GROUP, THEME_CHANGE, CHATROOM_USER_TYPING, CHATROOM_USER_STOP_TYPING } from './utils/events.js'
import './controller/namespace.js'
import './controller/actions/index.js'
import './controller/backend.js'
Expand Down 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 @@ -306,6 +307,10 @@ async function startApp () {
sbp('gi.periodicNotifications/clearStatesAndStopTimers')
sbp('chelonia.persistentActions/unload')
})
sbp('okTurtles.events/once', LOGIN_ERROR, () => {
// Remove the loading animation that sits on top of the Vue app, so that users can properly interact with the app for a follow-up action.
this.removeLoadingAnimation()
})
sbp('okTurtles.events/on', SWITCH_GROUP, () => {
this.initOrResetPeriodicNotifications()
this.checkAndEmitOneTimeNotifications()
Expand Down Expand Up @@ -365,16 +370,22 @@ async function startApp () {
// to ensure that we don't override user interactions that have already
// happened (an example where things can happen this quickly is in the
// tests).
console.log('!@# 11111')
sbp('gi.db/settings/load', SETTING_CURRENT_USER).then(identityContractID => {
console.log('!@# aaaaa - ', identityContractID)
if (!identityContractID || this.ephemeral.finishedLogin === 'yes') return
return sbp('gi.actions/identity/login', { identityContractID }).catch((e) => {
console.log('!@# 22222')
console.error(`[main] caught ${e?.name} while logging in: ${e?.message || e}`, e)
console.warn(`It looks like the local user '${identityContractID}' does not exist anymore on the server 😱 If this is unexpected, contact us at https://gitter.im/okTurtles/group-income`)
})
}).catch(e => {
console.log('!@# bbbbb')
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)
console.log('!@# ccccc')
this.ephemeral.ready = true
this.removeLoadingAnimation()
})
},
computed: {
Expand Down Expand Up @@ -407,6 +418,11 @@ async function startApp () {
]),
setBadgeOnTab () {
FaviconBadge.setBubble(this.shouldSetBadge)
},
removeLoadingAnimation () {
// remove the minimal loading animation in index.html
const loadingScreenEl = document.querySelector('#main-loading-screen')
loadingScreenEl && loadingScreenEl.remove()
}
},
watch: {
Expand Down
Loading