Render speed improvements

modified: frontend/src/components/ListViews/LeadsListView.vue modified: frontend/src/components/ListViews/ListRows.vue modified: frontend/src/components/Modals/SidePanelModal.vue
metalmon · Dec 24, 2024 · a3da5a5 · a3da5a5
1 parent a059fb3
commit a3da5a5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
@@ -17,7 +17,6 @@
   >
     <ListHeader
       class="sm:mx-5 mx-3"
-      @columnWidthUpdated="emit('columnWidthUpdated')"
     >
       <ListHeaderItem
         v-for="column in columns"
@@ -36,7 +35,7 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows :rows="rows" v-slot="{ idx, column, item, row }">
+    <TranslatedListRows :rows="rows" v-slot="{ idx, column, item, row }">
       <div v-if="column.key === '_assign'" class="flex items-center">
         <MultipleAvatar
           :avatars="item || []"
@@ -179,7 +178,7 @@
           </div>
         </template>
       </ListRowItem>
-    </ListRows>
+    </TranslatedListRows>
     <ListSelectBanner>
       <template #actions="{ selections, unselectAll }">
         <Dropdown
@@ -210,12 +209,13 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ListBulkActions from '@/components/ListBulkActions.vue'
-import ListRows from '@/components/ListViews/ListRows.vue'
+import TranslatedListRows from '@/components/ListViews/ListRows.vue'
 import {
   Avatar,
   ListView,
   ListHeader,
   ListHeaderItem,
+  ListRow,
   ListRowItem,
   Dropdown,
   Tooltip,

diff --git a/frontend/src/components/ListViews/ListRows.vue b/frontend/src/components/ListViews/ListRows.vue
@@ -3,7 +3,7 @@
     class="mx-3 mt-2 h-full overflow-y-auto dark-scrollbar sm:mx-5" 
     v-if="showGroupedRows"
   >
-    <div v-for="group in reactivieRows" :key="group.group">
+    <div v-for="group in rows" :key="group.group">
       <ListGroupHeader :group="group">
         <div
           class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8"
@@ -14,7 +14,7 @@
             <div v-if="group.group == ' '" class="text-ink-gray-4">
               {{ __('Empty') }}
             </div>
-            <div v-else>{{ group.group }}</div>
+            <div v-else>{{ __(group.group) }}</div>
           </div>
         </div>
       </ListGroupHeader>
@@ -25,7 +25,7 @@
           v-slot="{ idx, column, item }"
           :row="row"
         >
-          <slot v-bind="{ idx, column, item, row }" />
+          <slot v-bind="{ idx, column, item: translateItem(item, column), row }" />
         </ListRow>
       </ListGroupRows>
     </div>
@@ -36,20 +36,19 @@
     id="list-rows"
   >
     <ListRow
-      v-for="row in reactivieRows"
+      v-for="row in rows"
       :key="row.name"
       v-slot="{ idx, column, item }"
       :row="row"
     >
-      <slot v-bind="{ idx, column, item, row }" />
+      <slot v-bind="{ idx, column, item: translateItem(item, column), row }" />
     </ListRow>
   </ListRows>
 </template>
 
 <script setup>
 import { ListRows, ListRow, ListGroupHeader, ListGroupRows } from 'frappe-ui'
-
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -58,16 +57,20 @@ const props = defineProps({
   },
 })
 
-const reactivieRows = ref(props.rows)
-
-watch(
-  () => props.rows,
-  (val) => (reactivieRows.value = val)
-)
-
-let showGroupedRows = computed(() => {
+const showGroupedRows = computed(() => {
   return props.rows.every(
     (row) => row.group && row.rows && Array.isArray(row.rows)
   )
 })
+
+function translateItem(item, column) {
+  if (!column) return item
+  if (column.key === 'status' && item?.label) {
+    return {
+      ...item,
+      label: __(item.label)
+    }
+  }
+  return item
+}
 </script>
diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
@@ -104,20 +104,27 @@ const dirty = ref(false)
 const preview = ref(false)
 const data = ref({})
 
-function getParams() {
-  return { doctype: _doctype.value, type: 'Side Panel' }
-}
-
 const tabs = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
   cache: ['SidePanel', _doctype.value],
-  params: getParams(),
-  auto: false,
+  params: { doctype: _doctype.value, type: 'Side Panel' },
+  auto: true,
   onSuccess(data) {
     tabs.originalData = JSON.parse(JSON.stringify(data))
   },
 })
 
+watch(
+  () => _doctype.value,
+  () => {
+    if (_doctype.value) {
+      tabs.params = { doctype: _doctype.value, type: 'Side Panel' }
+      tabs.reload()
+    }
+  },
+  { immediate: true }
+)
+
 watch(
   () => tabs?.data,
   () => {
@@ -127,11 +134,9 @@ watch(
   { deep: true },
 )
 
-onMounted(() => useDebounceFn(reload, 100)())
-
 function reload() {
   nextTick(() => {
-    tabs.params = getParams()
+    tabs.params = { doctype: _doctype.value, type: 'Side Panel' }
     tabs.reload()
   })
 }