basic attr pagination to prevent freezing

ui/src/components/widgets/Table.vue

@@ -11,7 +11,7 @@
         <th>Attribute</th>
         <th>Value</th>
       </tr>
-      <tr v-for="[id, entry] in attributes" :key="id">
+      <tr v-for="[id, entry] in limitedAttributes" :key="id">
         <td class="attr-action">
           <sl-icon-button name="x-circle" @click="removeEntry(id)" />
         </td>
@@ -38,6 +38,13 @@
           </template>
         </td>
       </tr>
+      <tr v-if="attributes.length > currentDisplay">
+        <td colspan="3">
+          <sl-button class="more-button" @click="currentDisplay += MAX_DISPLAY">
+            + {{ attributes.length - currentDisplay }} more...
+          </sl-button>
+        </td>
+      </tr>
       <tr v-if="insertable">
         <td class="attr-action">
           <sl-icon-button name="plus-circle" @click="addEntry()" />
@@ -58,6 +65,7 @@ import Address from "@/components/Address.vue";
 import Marquee from "@/components/Marquee.vue";
 import { AttributeChange, IEntry } from "@/types/base";
 import {
+  computed,
   defineComponent,
   onMounted,
   PropType,
@@ -112,9 +120,20 @@ export default defineComponent({
       });
     });
 
+    // "Pagination"
+    const MAX_DISPLAY = 50;
+    const currentDisplay = ref(MAX_DISPLAY);
+
+    const limitedAttributes = computed(() => {
+      return props.attributes.slice(0, currentDisplay.value);
+    });
+
     return {
       addressEls,
       resolve,
+      limitedAttributes,
+      currentDisplay,
+      MAX_DISPLAY,
     };
   },
   methods: {
@@ -138,4 +157,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.more-button {
+  width: 100%;
+}
 </style>