From 038e63d94d8e935665a9303a58bf34716254f467 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 22 Jul 2020 02:21:17 +0300
Subject: [PATCH] theme switcher upd

---
 src/components/Header/Header.js               | 25 ++-----------
 src/components/Header/Header.scss             |  5 +++
 .../Header/ThemeSwitcher/ThemeSwitcher.js     | 36 +++++++++++++++++++
 3 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Header/ThemeSwitcher/ThemeSwitcher.js

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 5096b63..98b7334 100644
--- a/src/components/Header/Header.js
+++ b/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">
-            {isDark ? (
-              <SunIcon
-                onClick={() => {
-                  window.__setTheme("light")
-                  setIsDark(!isDark)
-                }}
-              />
-            ) : (
-              <MoonIcon
-                onClick={() => {
-                  window.__setTheme("dark")
-                  setIsDark(!isDark)
-                }}
-              />
-            )}
-          </div>
+          <ThemeSwitcher />
         </div>
         <div
           className={
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 794a28c..7b94af1 100644
--- a/src/components/Header/Header.scss
+++ b/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 {
diff --git a/src/components/Header/ThemeSwitcher/ThemeSwitcher.js b/src/components/Header/ThemeSwitcher/ThemeSwitcher.js
new file mode 100644
index 0000000..fafa3c6
--- /dev/null
+++ b/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
\ No newline at end of file