Delay rendering blocks until the schema has been attempted to be loaded

This commit is contained in:
Andrew Kingston 2021-12-17 09:18:43 +00:00
parent 58e0daeb8c
commit 3a8e217bb7
2 changed files with 128 additions and 124 deletions

View File

@ -45,6 +45,7 @@
let dataProviderId let dataProviderId
let repeaterId let repeaterId
let schema let schema
let schemaLoaded = false
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
@ -113,10 +114,12 @@
if (dataSource) { if (dataSource) {
schema = await fetchDatasourceSchema(dataSource) schema = await fetchDatasourceSchema(dataSource)
} }
schemaLoaded = true
} }
</script> </script>
<Block> {#if schemaLoaded}
<Block>
<div class="card-list" use:styleable={$component.styles}> <div class="card-list" use:styleable={$component.styles}>
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}> <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
{#if title || enrichedSearchColumns?.length || showTitleButton} {#if title || enrichedSearchColumns?.length || showTitleButton}
@ -207,7 +210,8 @@
</BlockComponent> </BlockComponent>
</BlockComponent> </BlockComponent>
</div> </div>
</Block> </Block>
{/if}
<style> <style>
.header { .header {

View File

@ -96,7 +96,8 @@
} }
</script> </script>
<Block> {#if schemaLoaded}
<Block>
<div class={size} use:styleable={$component.styles}> <div class={size} use:styleable={$component.styles}>
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}> <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
{#if title || enrichedSearchColumns?.length || showTitleButton} {#if title || enrichedSearchColumns?.length || showTitleButton}
@ -136,7 +137,6 @@
</div> </div>
</div> </div>
{/if} {/if}
{#if schema}
<BlockComponent <BlockComponent
type="dataprovider" type="dataprovider"
bind:id={dataProviderId} bind:id={dataProviderId}
@ -165,10 +165,10 @@
}} }}
/> />
</BlockComponent> </BlockComponent>
{/if}
</BlockComponent> </BlockComponent>
</div> </div>
</Block> </Block>
{/if}
<style> <style>
.header { .header {