Remove lazy loading & change rotation animation

site/components/common/Footer/Footer.tsx

@@ -1,22 +1,15 @@
 import { FC } from 'react'
 import cn from 'clsx'
 import Link from 'next/link'
-import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import type { Page } from '@commerce/types/page'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
+import ThemeSwitcher from '@components/ui/ThemeSwitcher'
 import s from './Footer.module.css'
 
-const ThemeSwitcher = dynamic(() => import('@components/ui/ThemeSwitcher'), {
-  ssr: false,
-  loading: () => (
-    <div className="w-24 h-10 rounded-md bg-accent-2 animate-pulse" />
-  ),
-})
-
 interface Props {
   className?: string
   children?: any

site/components/common/I18nWidget/I18nWidget.module.css

@@ -32,7 +32,7 @@
 }
 
 .icon.active {
-  transform: rotate(180deg);
+  transform: rotate(90deg);
 }
 
 @screen lg {

site/components/common/I18nWidget/I18nWidget.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
-import { Cross, ChevronUp } from '@components/icons'
+import { Cross, ChevronRight } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
 import Image from 'next/image'
 interface LOCALE_DATA {
@@ -61,7 +61,7 @@ const I18nWidget: FC = () => {
             />
             {options && (
               <span className="cursor-pointer">
-                <ChevronUp className={cn(s.icon, { [s.active]: display })} />
+                <ChevronRight className={cn(s.icon, { [s.active]: display })} />
               </span>
             )}
           </button>

site/components/ui/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,18 +1,23 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
-import { ChevronUp, Cross } from '@components/icons'
+import { ChevronRight, Cross } from '@components/icons'
 
 import cn from 'clsx'
 import ClickOutside from '@lib/click-outside'
 import ThemeIcon from './ThemeIcon'
 
 const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false)
   const [display, setDisplay] = useState(false)
   const { theme, themes, setTheme } = useTheme()
 
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
   return (
     <ClickOutside active={display} onClick={() => setDisplay(false)}>
-      <nav className="relative">
+      <div className="relative">
         <div
           className="flex items-center relative"
           onClick={() => setDisplay(!display)}
@@ -26,9 +31,9 @@ const ThemeSwitcher = () => {
             <ThemeIcon width={20} height={20} theme={theme} />
             <span className="capitalize">{theme}</span>
             <span className="cursor-pointer">
-              <ChevronUp
+              <ChevronRight
                 className={cn('transition duration-300', {
-                  ['rotate-180']: display,
+                  ['rotate-90']: display,
                 })}
               />
             </span>
@@ -69,7 +74,7 @@ const ThemeSwitcher = () => {
             </div>
           ) : null}
         </div>
-      </nav>
+      </div>
     </ClickOutside>
   )
 }