mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Optimize table rendering with truncation and keying fixes
- Add keys to table columns to improve Svelte rendering performance - Limit tooltip content to 100 characters to prevent performance issues - Only render tooltip when actually showing to reduce DOM overhead - Show plain text for non-truncated content without tooltip wrapper
This commit is contained in:
+9
-4
@@ -90,7 +90,7 @@
|
||||
? `${formattedColumn.slice(0, 20)}...`
|
||||
: formattedColumn,
|
||||
truncated: formattedColumn.length > 20,
|
||||
whole: formattedColumn
|
||||
whole: `${formattedColumn.slice(0, 100)}...`
|
||||
};
|
||||
}
|
||||
|
||||
@@ -196,7 +196,7 @@
|
||||
{/key}
|
||||
</Table.Cell>
|
||||
|
||||
{#each $columns as { id }}
|
||||
{#each $columns as { id } (id)}
|
||||
{@const attr = $attributes.find((n) => n.key === id)}
|
||||
<Table.Cell column={id} {root}>
|
||||
{#if isRelationship(attr)}
|
||||
@@ -251,16 +251,21 @@
|
||||
<span slot="title">Timestamp</span>
|
||||
{toLocaleDateTime(formatted.whole, true, 'UTC')}
|
||||
</DualTimeView>
|
||||
{:else}
|
||||
{:else if formatted.truncated}
|
||||
<Tooltip placement="bottom" disabled={!formatted.truncated}>
|
||||
<Typography.Text truncate>{formatted.value}</Typography.Text>
|
||||
<span
|
||||
let:showing
|
||||
slot="tooltip"
|
||||
style:white-space="pre-wrap"
|
||||
style:word-break="break-all">
|
||||
{formatted.whole}
|
||||
{#if showing}
|
||||
{formatted.whole}
|
||||
{/if}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
<Typography.Text truncate>{formatted.value}</Typography.Text>
|
||||
{/if}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
|
||||
Reference in New Issue
Block a user