perf(client): use shallowRef as possible

2 files changed, 6 insertions, 5 deletions

diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue
index 170dbb36fa..e960926a15 100644
--- a/packages/client/src/components/analog-clock.vue
+++ b/packages/client/src/components/analog-clock.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue';
 import tinycolor from 'tinycolor2';
 import { globalEvents } from '@/events.js';
 
@@ -112,7 +112,7 @@ const texts = computed(() => {
 	return angles;
 });
 
-const now = ref(new Date());
+const now = shallowRef(new Date());
 now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
 
 const enabled = ref(true);
@@ -130,8 +130,9 @@ const mAngle = computed(() => Math.PI * (m.value + s.value / 60) / 30);
 const sAngle = computed(() => Math.PI * s.value / 30);
 
 function tick() {
-	now.value = new Date();
-	now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	const date = new Date();
+	date.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	now.value = date;
 }
 
 function calcColors() {
diff --git a/packages/client/src/components/global/time.vue b/packages/client/src/components/global/time.vue
index 801490225b..f72b153f56 100644
--- a/packages/client/src/components/global/time.vue
+++ b/packages/client/src/components/global/time.vue
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<{
 const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
 const absolute = _time.toLocaleString();
 
-let now = $ref(new Date());
+let now = $shallowRef(new Date());
 const relative = $computed(() => {
 	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
 	return (