From 7eb70d6a6a9707a19edd36212019ed7d33391bee Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 3 Jun 2025 14:02:17 +0200
Subject: [PATCH] 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
---
 .../collection-[collection]/table.svelte            | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 6b9c32b08..7b59321fd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -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>