Prevent flashing CTA buttons when initially loading table data
This commit is contained in:
parent
9e20f0406c
commit
620008fc42
|
@ -588,7 +588,7 @@
|
|||
border-top: none;
|
||||
grid-column: 1 / -1;
|
||||
background-color: var(--table-bg);
|
||||
padding: 60px 40px;
|
||||
padding: 40px;
|
||||
}
|
||||
.placeholder--no-fields {
|
||||
border-top: var(--table-border);
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
$: id = $tables.selected?._id
|
||||
$: fetch = createFetch(id)
|
||||
$: hasCols = checkHasCols(schema)
|
||||
$: hasRows = !!$fetch.data?.length
|
||||
$: hasRows = !!$fetch.rows?.length
|
||||
|
||||
const enrichSchema = schema => {
|
||||
let tempSchema = { ...schema }
|
||||
|
@ -124,14 +124,17 @@
|
|||
>
|
||||
<div class="buttons">
|
||||
<div class="left-buttons">
|
||||
<CreateColumnButton highlighted on:updatecolumns={onUpdateColumns} />
|
||||
<CreateColumnButton
|
||||
highlighted={$fetch.loaded && (!hasCols || !hasRows)}
|
||||
on:updatecolumns={onUpdateColumns}
|
||||
/>
|
||||
{#if !isUsersTable}
|
||||
<CreateRowButton
|
||||
on:updaterows={onUpdateRows}
|
||||
title={"Create row"}
|
||||
modalContentComponent={CreateEditRow}
|
||||
disabled={!hasCols}
|
||||
highlighted={hasCols && !hasRows}
|
||||
highlighted={$fetch.loaded && hasCols && !hasRows}
|
||||
/>
|
||||
{/if}
|
||||
{#if isInternal}
|
||||
|
@ -169,11 +172,19 @@
|
|||
</div>
|
||||
<div slot="placeholder">
|
||||
<Layout gap="S">
|
||||
<Heading>Let's create some columns!</Heading>
|
||||
{#if !hasCols}
|
||||
<Heading>Let's create some columns</Heading>
|
||||
<Body>
|
||||
Start building out your table structure<br />
|
||||
by adding some columns
|
||||
</Body>
|
||||
{:else}
|
||||
<Heading>Now let's add a row</Heading>
|
||||
<Body>
|
||||
Add some data to your table<br />
|
||||
by adding some rows
|
||||
</Body>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
</Table>
|
||||
|
|
Loading…
Reference in New Issue