fix: add interval to uses of useNow so that it uses less resources #3255
|
@ -4,8 +4,11 @@ import { useNow } from '@vueuse/core'
|
|||
|
||||
import LogoFull from '@/assets/logo-full.svg?component'
|
||||
import LogoFullPride from '@/assets/logo-full-pride.svg?component'
|
||||
import {MILLISECONDS_A_HOUR} from '@/constants/date'
|
||||
|
||||
const now = useNow()
|
||||
const now = useNow({
|
||||
konrad marked this conversation as resolved
|
||||
interval: MILLISECONDS_A_HOUR,
|
||||
})
|
||||
const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
|
||||
</script>
|
||||
|
||||
|
|
|
@ -38,9 +38,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch, toRefs} from 'vue'
|
||||
import {computed, ref, watch, toRefs, onActivated} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {useNow} from '@vueuse/core'
|
||||
|
||||
import {getHexColor} from '@/models/task'
|
||||
|
||||
|
@ -157,7 +156,8 @@ function openTask(e: {
|
|||
|
||||
const weekDayFromDate = useWeekDayFromDate()
|
||||
|
||||
const today = useNow()
|
||||
const today = ref(new Date())
|
||||
onActivated(() => today.value = new Date())
|
||||
const dateIsToday = computed(() => (date: Date) => {
|
||||
return (
|
||||
date.getDate() === today.value.getDate() &&
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import {computed} from 'vue'
|
||||
import {computed, onActivated, ref} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {useNow} from '@vueuse/core'
|
||||
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
import {hourToDaytime} from '@/helpers/hourToDaytime'
|
||||
|
@ -9,7 +8,8 @@ export type Daytime = 'night' | 'morning' | 'day' | 'evening'
|
|||
|
||||
export function useDaytimeSalutation() {
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
const now = useNow()
|
||||
const now = ref(new Date())
|
||||
onActivated(() => now.value = new Date())
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const name = computed(() => authStore.userDisplayName)
|
||||
|
|
Reference in New Issue
We want that the Logo changes at midnight, correct? By setting this to change in an interval of a day this might happen at 23:00 the next day if the logo page with the logo was opened at that time the day before. Could we configure this somehow so that it's triggered every real daychange? Or hour change?
Calculating how much time left until the point of change +
setTimeout
(possiblysetInterval
in case the page is not reloaded for months) should work.Ideally we want to change the logo at midnight, yes. But since this is not something I'd consider critical and it will be shown for a whole month it should be enough to check this once a day. Even if that means it might lag behind one day.
We should use the time unit constants for this.
How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.
We should use the time unit constants for this.
How about using every hour? One tick per hour should really not create any performance issues (as said earlier I think once per second should also not be an issue.
Done!
and done!