Merge pull request #1982 from appwrite/fix-documents-table-performance

Optimize table rendering with truncation and keying fixes

Author: TorstenDittmann

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@d7e3b86",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@4e03f34",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -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>