MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add correct height placeholder for tables to avoid jarring page resizing when loading data

This commit is contained in:
Andrew Kingston 2021-03-29 16:05:32 +01:00
parent 9012df0b90
commit 8457e1743c
2 changed files with 19 additions and 1116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1116
packages/server/yarn.lock
View File

File diff suppressed because it is too large Load Diff

19
packages/standard-components/src/table/Table.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { fade } from "svelte/transition"
import "@spectrum-css/table/dist/index-vars.css" import "@spectrum-css/table/dist/index-vars.css"
import { getContext } from "svelte" import { getContext } from "svelte"
import CellRenderer from "./CellRenderer.svelte" import CellRenderer from "./CellRenderer.svelte"
@ -27,9 +28,11 @@
// Table state // Table state
$: loaded = dataProvider?.loaded ?? false $: loaded = dataProvider?.loaded ?? false
$: rows = dataProvider?.rows ?? [] $: rows = dataProvider?.rows ?? []
$: visibleRowCount = Math.min(rows.length, rowCount || maxRows, maxRows) $: visibleRowCount = loaded
? Math.min(rows.length, rowCount || maxRows, maxRows)
: Math.min(8, rowCount || maxRows)
$: scroll = rows.length > visibleRowCount $: scroll = rows.length > visibleRowCount
$: contentStyle = getContentStyle(visibleRowCount, scroll) $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
$: sortedRows = sortRows(rows, sortColumn, sortOrder) $: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: schema = dataProvider?.schema ?? {} $: schema = dataProvider?.schema ?? {}
$: fields = getFields(schema, columns, showAutoColumns) $: fields = getFields(schema, columns, showAutoColumns)
@ -45,8 +48,8 @@
rows.length rows.length
) )
const getContentStyle = (visibleRows, scroll) => { const getContentStyle = (visibleRows, useFixedHeight) => {
if (!scroll) { if (!useFixedHeight) {
return "" return ""
} }
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;` return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
@ -123,7 +126,9 @@
} }
</script> </script>
{#if loaded} {#if !loaded}
<div class="content" style={contentStyle} />
{:else}
<div use:styleable={$component.styles}> <div use:styleable={$component.styles}>
<div <div
on:scroll={onScroll} on:scroll={onScroll}
@ -166,9 +171,7 @@
<tr <tr
class="spectrum-Table-row" class="spectrum-Table-row"
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
{#if idx < firstVisibleRow || idx > lastVisibleRow} {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
{:else}
{#if $component.children} {#if $component.children}
<td <td
class="spectrum-Table-cell spectrum-Table-cell--divider"> class="spectrum-Table-cell spectrum-Table-cell--divider">