theme switcher upd

src/components/Header/Header.js

@@ -3,12 +3,11 @@ import { useLocation } from "@reach/router"
 import PropTypes from "prop-types"
 import { Link } from "gatsby"
 import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
+import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher'
 
 import LogoIcon from "../../images/logo-icon.svg"
 import TelegramIcon from "../../images/telegram-icon.svg"
 import TwitterIcon from "../../images/twitter-icon.svg"
-import MoonIcon from "../../images/moon-icon.svg"
-import SunIcon from "../../images/sun-icon.svg"
 
 const Header = () => {
   const {
@@ -20,17 +19,15 @@ const Header = () => {
   } = useSiteMetadataQuery()
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
-  const [isDark, setIsDark] = React.useState(false)
   const { pathname } = useLocation()
 
   React.useEffect(() => {
-    setIsDark(window.__isDarkTheme)
     isMobileOpen
       ? (document.body.style.overflowY = "hidden")
       : (document.body.style.overflowY = "")
     document.body.onscroll = () =>
       window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
-  }, [setIsDark, isMobileOpen])
+  }, [isMobileOpen])
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -74,23 +71,7 @@ const Header = () => {
           <div className="header-nav__links">
             <nav>{renderLinks()}</nav>
           </div>
-          <div className="header-nav__theme">
+          <ThemeSwitcher />
-            {isDark ? (
-              <SunIcon
-                onClick={() => {
-                  window.__setTheme("light")
-                  setIsDark(!isDark)
-                }}
-              />
-            ) : (
-              <MoonIcon
-                onClick={() => {
-                  window.__setTheme("dark")
-                  setIsDark(!isDark)
-                }}
-              />
-            )}
-          </div>
         </div>
         <div
           className={

src/components/Header/Header.scss

@@ -86,6 +86,11 @@ header {
       }
       & .header-nav__theme {
         cursor: pointer;
+        opacity: 0;
+      }
+      & .header-nav__theme.ready {
+        opacity: 1;
+        transition: all 0.2s linear 0s;
       }
     }
     &__nav.mobile {

src/components/Header/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import MoonIcon from "../../../images/moon-icon.svg"
+import SunIcon from "../../../images/sun-icon.svg"
+
+const ThemeSwitcher = () => {
+  const [ready, setReady] = React.useState(false)
+  const [isDark, setIsDark] = React.useState(false)
+  
+  React.useEffect(() => {
+    setIsDark(window.__isDarkTheme)
+    setReady(true)
+  }, [setIsDark, setReady])
+
+  return (
+    <div className={ready ? 'header-nav__theme ready' : 'header-nav__theme'}>
+      {isDark ? (
+        <SunIcon
+          onClick={() => {
+            window.__setTheme("light")
+            setIsDark(!isDark)
+          }}
+        />
+      ) : (
+        <MoonIcon
+          onClick={() => {
+            window.__setTheme("dark")
+            setIsDark(!isDark)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default ThemeSwitcher