diff --git a/web/src/components/features/tasks/parts/TaskDeadline.vue b/web/src/components/features/tasks/parts/TaskDeadline.vue
index 4787097..f80fd39 100644
--- a/web/src/components/features/tasks/parts/TaskDeadline.vue
+++ b/web/src/components/features/tasks/parts/TaskDeadline.vue
@@ -3,7 +3,7 @@
-
+
@@ -42,7 +42,7 @@
color="error"
variant="outline"
size="sm"
- :loading="loadingStart"
+ :loading="deferredLoadingStart"
@click="clearStartDate"
/>
@@ -50,7 +50,7 @@
-
+
@@ -89,7 +89,7 @@
color="error"
variant="outline"
size="sm"
- :loading="loadingEnd"
+ :loading="deferredLoadingEnd"
@click="clearEndDate"
/>
@@ -98,14 +98,14 @@
-
+
+
+
@@ -151,6 +169,8 @@ import { useTasksStore } from '@/stores/tasks.store'
import { useColor } from '@/composables/useColotMode'
import { useGoalPermissions } from '@/composables/useGoalPermissions'
+type QuickAction = 'today' | 'tomorrow' | 'yesterday' | 'week' | 'month' | 'clear' | null
+
const props = defineProps<{
task: Task
}>()
@@ -158,14 +178,47 @@ const props = defineProps<{
const { t } = useI18n()
const tasksStore = useTasksStore()
const { isDark } = useColor()
+const LOADING_DELAY = 500
const loadingStart = ref(false)
const loadingEnd = ref(false)
-const loadingQuick = ref(false)
+const deferredLoadingStart = ref(false)
+const deferredLoadingEnd = ref(false)
+const activeQuickAction = ref
(null)
+const deferredQuickAction = ref(null)
+
+let quickTimer: ReturnType | null = null
+
+watch(activeQuickAction, (val) => {
+ if (val) {
+ quickTimer = setTimeout(() => { deferredQuickAction.value = val }, LOADING_DELAY)
+ } else {
+ if (quickTimer) clearTimeout(quickTimer)
+ quickTimer = null
+ deferredQuickAction.value = null
+ }
+})
+
+useDeferredLoading(loadingStart, deferredLoadingStart)
+useDeferredLoading(loadingEnd, deferredLoadingEnd)
+
const { canEditTaskDeadline } = useGoalPermissions()
const activatorStyle = {
leadingIcon: 'size-4.5',
}
+function useDeferredLoading(source: typeof loadingStart, deferred: typeof deferredLoadingStart) {
+ let timer: ReturnType | null = null
+ watch(source, (val) => {
+ if (val) {
+ timer = setTimeout(() => { deferred.value = true }, LOADING_DELAY)
+ } else {
+ if (timer) clearTimeout(timer)
+ timer = null
+ deferred.value = false
+ }
+ })
+}
+
// Parse date string (YYYY-MM-DD) to CalendarDate
function parseDateString(dateStr: string | null | undefined): CalendarDate | undefined {
if (!dateStr) return undefined
@@ -190,11 +243,14 @@ const startTimeModel = shallowRef