1
0
Fork 0
mirror of synced 2024-09-20 19:33:10 +12:00
budibase/packages/frontend-core/src/components/Updating.svelte

88 lines
1.8 KiB
Svelte

<script>
export let isMigrationDone
export let onMigrationDone
export let timeoutSeconds = 60 // 1 minute
export let minTimeSeconds = 3
const loadTime = Date.now()
const intervalMs = 1000
let timedOut = false
let secondsWaited = 0
async function checkMigrationsFinished() {
setTimeout(async () => {
const isMigrated = await isMigrationDone()
const timeoutMs = timeoutSeconds * 1000
if (!isMigrated || secondsWaited <= minTimeSeconds) {
if (loadTime + timeoutMs > Date.now()) {
secondsWaited += 1
return checkMigrationsFinished()
}
return migrationTimeout()
}
onMigrationDone()
}, intervalMs)
}
checkMigrationsFinished()
function migrationTimeout() {
timedOut = true
}
</script>
<div class="loading" class:timeout={timedOut}>
<span class="header">
{#if !timedOut}
System update
{:else}
Something went wrong!
{/if}
</span>
<span class="subtext">
{#if !timedOut}
Please wait and we will be back in a second!
<br />
Checkout the
<a href="https://docs.budibase.com/docs/app-migrations" target="_blank"
>documentation</a
> on app migrations.
{:else}
An error occurred, please try again later.
<br />
Contact
<a href="https://budibase.com/support/" target="_blank">support</a> if the
issue persists.
{/if}</span
>
</div>
<style>
.loading {
display: flex;
justify-content: center;
flex-direction: column;
gap: var(--spacing-l);
height: 100vh;
text-align: center;
font-size: 18px;
}
.header {
font-weight: 700;
}
.timeout .header {
color: rgb(196, 46, 46);
}
.subtext {
font-size: 16px;
color: var(--grey-7);
}
.subtext a {
color: var(--grey-7);
font-weight: 700;
}
</style>