budibase/packages/frontend-core/src/components/Updating.svelte

84 lines
1.7 KiB
Svelte

<script>
export let isMigrationDone
export let onMigrationDone
export let timeoutSeconds = 60 // 1 minute
let timedOut = false
async function checkMigrationsFinished() {
let totalWaitMs = 0
// eslint-disable-next-line no-constant-condition
while (true) {
const waitForMs = 5000 + Math.random() * 5000
await new Promise(resolve => setTimeout(resolve, waitForMs))
totalWaitMs += waitForMs
const isMigrated = await isMigrationDone()
if (isMigrated) {
onMigrationDone()
return
}
if (totalWaitMs > timeoutSeconds * 1000) {
timedOut = true
return
}
}
}
checkMigrationsFinished()
</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>