add lazy loading to modals and dropdowns to improve time page render performance

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>

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

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"

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"