From f1d001e03ee546acf9f01ea03c30c1093585cb77 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 17 Feb 2026 13:54:26 +0100
Subject: [PATCH] add lazy loading to modals and dropdowns to improve time page
 render performance

---
 resources/js/packages/ui/src/Icons/BillableIcon.vue |  9 ++++-----
 resources/js/packages/ui/src/Tag/TagDropdown.vue    |  1 +
 .../js/packages/ui/src/TimeEntry/TimeEntryRow.vue   |  1 +
 .../TimeTracker/TimeTrackerProjectTaskDropdown.vue  | 13 +++++++++++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/resources/js/packages/ui/src/Icons/BillableIcon.vue b/resources/js/packages/ui/src/Icons/BillableIcon.vue
index c7c0f7cb..67d94806 100644
--- a/resources/js/packages/ui/src/Icons/BillableIcon.vue
+++ b/resources/js/packages/ui/src/Icons/BillableIcon.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
-import { getCurrentOrganizationId } from '@/utils/useUser';
+import { computed, inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 import DollarIcon from './DollarIcon.vue';
 import EuroIcon from './EuroIcon.vue';
 
-const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
-const icon = computed(() => (organization.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
+const organization = inject<ComputedRef<Organization>>('organization');
+const icon = computed(() => (organization?.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
 </script>
 
 <template>
diff --git a/resources/js/packages/ui/src/Tag/TagDropdown.vue b/resources/js/packages/ui/src/Tag/TagDropdown.vue
index 8c9b733c..9a3ca6cf 100644
--- a/resources/js/packages/ui/src/Tag/TagDropdown.vue
+++ b/resources/js/packages/ui/src/Tag/TagDropdown.vue
@@ -91,6 +91,7 @@ const showCreateTagModal = ref(false);
 
 <template>
     <TagCreateModal
+        v-if="showCreateTagModal"
         v-model:show="showCreateTagModal"
         :create-tag="createAndAddTag"></TagCreateModal>
     <Dropdown
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
index 0fd8b52c..36f3e974 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
@@ -228,6 +228,7 @@ async function handleDeleteTimeEntry() {
     </div>
 
     <TimeEntryEditModal
+        v-if="showEditModal"
         v-model:show="showEditModal"
         :time-entry="timeEntry"
         :enable-estimated-time="enableEstimatedTime"
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index e9ea3440..cd00db33 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, nextTick, ref, watch, watchEffect } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
 import type {
     CreateClientBody,
@@ -33,6 +33,7 @@ const searchValue = ref('');
 
 watch(open, (isOpen) => {
     if (isOpen) {
+        updateFilteredResults();
         nextTick(() => {
             initializeHighlightedItem();
             searchInput.value?.focus({ preventScroll: true });
@@ -148,7 +149,7 @@ function addProjectToFilterObject(
     }
 }
 
-watchEffect(() => {
+function updateFilteredResults() {
     const tempFilteredClients: ClientsWithProjectsWithTasks = [];
 
     if (searchValue.value.length === 0) {
@@ -243,6 +244,13 @@ watchEffect(() => {
     });
 
     filteredResults.value = tempFilteredClients;
+}
+
+// Recompute filtered results when search value changes while open
+watch(searchValue, () => {
+    if (open.value) {
+        updateFilteredResults();
+    }
 });
 
 async function addClientIfNoneExists() {
@@ -648,6 +656,7 @@ const showCreateProject = ref(false);
         </template>
     </Dropdown>
     <ProjectCreateModal
+        v-if="showCreateProject"
         v-model:show="showCreateProject"
         :create-client
         :enable-estimated-time="enableEstimatedTime"