Lag during theme change (shadcn ui, next.js)

[eager leaf]

Hi I feel a lag while using shadcn ui with next-themes to change the theme of the theme button. I'm using the same code as mentioned at: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/mode-toggle.tsx#L21
Heres my git repo: https://github.com/alvinsjoy/PortfolioWebsite/blob/main/components/ThemeSwitcher.tsx#L23
The first video is from my website (https://www.alvinjoy.live) and the second is from https://ui.shadcn.com
Does anyone know why is it happening? Is something wrong with my configs?

[peak field]

<Button variant="ghost" className="w-9 px-0">

<Button

[eager leaf]

!helper

[stray sedge]

Hello

[eager leaf]

hi

[stray sedge]

how can i help you?

[eager leaf]

can you tell me whats causing the lag here?

please check the videos for better understanding

[eager leaf]

@stray sedge

[frigid pendant]

Your css has

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

is that related?

[eager leaf]

even if the transition is none there is a lag in color change of the icon

i found that this is actually intentional and can be disabled in the next themes provider (https://github.com/pacocoursey/next-themes?tab=readme-ov-file#disable-transitions-on-theme-change)

thanks