Is it normal that getting the color mode preference takes 3-5 seconds?

[molul]

In my Nuxt app, it takes like 3-5 seconds before I see my custom theme select button on the screen.

You can check it here (the button will appear next to the flag button, either at the top bar on mobile or at the bottom of left sidebar on desktop, after a few seconds): https://buscamusicos-ui-nuxt-git-main-moluls-projects.vercel.app/es

This is my custom component:

<script setup lang="ts">
import BaseMenuItem from '~/components/menus/BaseMenuItem.vue'

interface SelectThemeButtonProps {
  menuType: 'sidebar' | 'mobile-header' | undefined
}
const props = defineProps<SelectThemeButtonProps>()

const colorMode = useColorMode()

const icon = ref()

// ---------------------------
// switchColor
// ---------------------------
function switchColor() {
  colorMode.preference = colorMode.preference === 'light' ? 'dark' : 'light'
  switchIcon()
}

// ---------------------------
// switchIcon
// ---------------------------
function switchIcon() {
  icon.value = colorMode.preference === 'light' ? 'solar:moon-bold' : 'solar:sun-2-bold'
}

// ---------------------------
// onMounted
// ---------------------------
onMounted(() => {
  switchIcon()
})
</script>

<template>
  <BaseMenuItem :menu-type="props.menuType" :icon="icon" @click="switchColor" />
</template>

I had to put the icon switch on onMounted because otherwise I would get a hydration error. Guess that's why it takes so long, but I don't know how to put it outside onMounted.

No special configuration. Storage is set to localStorage.

I thought it was due to Nuxt icon module, but the other icons appear quickly.

Any help is greatly appreciated.

[Deeyuude]

I have the same issue ! Did you find anything please ?