New Onboarding Loading States (#9519)

* New Onboarding Loading States

* Pr Feedback
This commit is contained in:
Gerard Burns 2023-02-07 14:47:46 +00:00 committed by GitHub
parent cdc2159af6
commit 7a443f6a5d
1 changed files with 45 additions and 27 deletions

View File

@ -16,6 +16,7 @@
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte" import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen" import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
import { Roles } from "constants/backend" import { Roles } from "constants/backend"
import Spinner from "components/common/Spinner.svelte"
let name = "My first app" let name = "My first app"
let url = "my-first-app" let url = "my-first-app"
@ -25,39 +26,46 @@
let plusIntegrations = {} let plusIntegrations = {}
let integrationsLoading = true let integrationsLoading = true
$: getIntegrations() $: getIntegrations()
let creationLoading = false
let uploadModal let uploadModal
const createApp = async useSampleData => { const createApp = async useSampleData => {
creationLoading = true
// Create form data to create app // Create form data to create app
// This is form based and not JSON // This is form based and not JSON
let data = new FormData() try {
data.append("name", name.trim()) let data = new FormData()
data.append("url", url.trim()) data.append("name", name.trim())
data.append("useTemplate", false) data.append("url", url.trim())
data.append("useTemplate", false)
if (useSampleData) { if (useSampleData) {
data.append("sampleData", true) data.append("sampleData", true)
}
const createdApp = await API.createApp(data)
// Select Correct Application/DB in prep for creating user
const pkg = await API.fetchAppPackage(createdApp.instance._id)
await store.actions.initialise(pkg)
await automationStore.actions.fetch()
// Update checklist - in case first app
await admin.init()
// Create user
await auth.setInitInfo({})
let defaultScreenTemplate = createFromScratchScreen.create()
defaultScreenTemplate.routing.route = "/home"
defaultScreenTemplate.routing.roldId = Roles.BASIC
await store.actions.screens.save(defaultScreenTemplate)
appId = createdApp.instance._id
} catch (e) {
creationLoading = false
throw e
} }
const createdApp = await API.createApp(data)
// Select Correct Application/DB in prep for creating user
const pkg = await API.fetchAppPackage(createdApp.instance._id)
await store.actions.initialise(pkg)
await automationStore.actions.fetch()
// Update checklist - in case first app
await admin.init()
// Create user
await auth.setInitInfo({})
let defaultScreenTemplate = createFromScratchScreen.create()
defaultScreenTemplate.routing.route = "/home"
defaultScreenTemplate.routing.roldId = Roles.BASIC
await store.actions.screens.save(defaultScreenTemplate)
appId = createdApp.instance._id
} }
const getIntegrations = async () => { const getIntegrations = async () => {
@ -102,6 +110,7 @@
goToApp() goToApp()
} catch (e) { } catch (e) {
console.log(e) console.log(e)
creationLoading = false
notifications.error("There was a problem creating your app") notifications.error("There was a problem creating your app")
} }
} }
@ -118,8 +127,10 @@
<SplitPage> <SplitPage>
{#if stage === "name"} {#if stage === "name"}
<NamePanel bind:name bind:url onNext={() => (stage = "data")} /> <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
{:else if integrationsLoading} {:else if integrationsLoading || creationLoading}
<p>loading...</p> <div class="spinner">
<Spinner />
</div>
{:else if stage === "data"} {:else if stage === "data"}
<DataPanel onBack={() => (stage = "name")}> <DataPanel onBack={() => (stage = "name")}>
<div class="dataButton"> <div class="dataButton">
@ -175,6 +186,13 @@
</SplitPage> </SplitPage>
<style> <style>
.spinner {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.dataButton { .dataButton {
margin-bottom: 12px; margin-bottom: 12px;
} }