From 688fb02c093cdd44a85eed619d26afc59eb35f3f Mon Sep 17 00:00:00 2001
From: Ansh Saini <ansh@lestransformations.com>
Date: Fri, 16 Oct 2020 20:52:52 +0530
Subject: [PATCH 1/2] feat: add loader

---
 src/components/home.jsx   | 11 +++++++-
 src/components/loader.jsx | 12 +++++++++
 src/styles/loader.css     | 56 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/components/loader.jsx
 create mode 100644 src/styles/loader.css

diff --git a/src/components/home.jsx b/src/components/home.jsx
index f168128..0a2bc01 100644
--- a/src/components/home.jsx
+++ b/src/components/home.jsx
@@ -3,6 +3,7 @@ import { useRef, useState, useEffect } from 'preact/hooks'
 import Canvas from './canvas'
 import CustomBar from './customBar'
 import Navbar from './nav'
+import Loader from './loader'
 import { waveInit } from '../wave'
 import { OPACITY_ARR, MAX_WAVES } from './../constants'
 import SVGCode from './svgCode'
@@ -26,9 +27,11 @@ function Home({ isDark, toggleDarkMode }) {
   })
 
   const [waveSvg, setWaveSvg] = useState(waveInit(wave))
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     setWaveSvg(waveInit(wave))
+    setLoading(false)
   }, [wave])
 
   const { height, xmlns, path } = waveSvg.svg
@@ -80,6 +83,8 @@ function Home({ isDark, toggleDarkMode }) {
     saveSvgAsPng.saveSvgAsPng(document.getElementById('bg-svg'), 'svg.png')
   }
 
+  if (loading) return <Loader />
+
   return (
     <div className="relative h-screen dark:bg-darkish-black">
       <Navbar isDark={isDark} toggleDarkMode={toggleDarkMode} color={bgColor} />
@@ -106,7 +111,11 @@ function Home({ isDark, toggleDarkMode }) {
           />
         </div>
         <div className="z-20 flex h-12 text-lg font-bold text-black footer dark:text-white">
-          Made with ❤ - by <a href="https://www.anup.tech" className="ml-2 underline"> Anup</a>
+          Made with ❤ - by{' '}
+          <a href="https://www.anup.tech" className="ml-2 underline">
+            {' '}
+            Anup
+          </a>
         </div>
       </div>
     </div>
diff --git a/src/components/loader.jsx b/src/components/loader.jsx
new file mode 100644
index 0000000..701cbc4
--- /dev/null
+++ b/src/components/loader.jsx
@@ -0,0 +1,12 @@
+import { h } from 'preact'
+import './../styles/loader.css'
+
+function Loader() {
+  return (
+    <div className="loader-container">
+      <div className="loader"></div>
+    </div>
+  )
+}
+
+export default Loader
diff --git a/src/styles/loader.css b/src/styles/loader.css
new file mode 100644
index 0000000..44a9bfe
--- /dev/null
+++ b/src/styles/loader.css
@@ -0,0 +1,56 @@
+.loader-container {
+  width: 100%;
+  height: 100vh;
+  background-color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  width: 100px;
+  height: 100px;
+  background-color: #4de6d4;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+}
+
+.loader:before {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+}
+
+.loader:before {
+  top: -40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+  animation: wave 5s linear infinite;
+}
+
+.loader:after {
+  top: -40px;
+  border-radius: 30%;
+  background: rgba(255, 255, 255, 0.3);
+  animation: wave 5s linear infinite;
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

From 1c5ad1edef691e57a33252d3837dd2789594185b Mon Sep 17 00:00:00 2001
From: Ansh Saini <anshsaini625@gmail.com>
Date: Sat, 17 Oct 2020 13:43:14 +0530
Subject: [PATCH 2/2] fix: loader implementation

---
 src/components/home.jsx   |  5 -----
 src/components/loader.jsx | 12 ------------
 src/index.html            | 19 +++++++++++++++++++
 3 files changed, 19 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/loader.jsx

diff --git a/src/components/home.jsx b/src/components/home.jsx
index 0a2bc01..1715b70 100644
--- a/src/components/home.jsx
+++ b/src/components/home.jsx
@@ -3,7 +3,6 @@ import { useRef, useState, useEffect } from 'preact/hooks'
 import Canvas from './canvas'
 import CustomBar from './customBar'
 import Navbar from './nav'
-import Loader from './loader'
 import { waveInit } from '../wave'
 import { OPACITY_ARR, MAX_WAVES } from './../constants'
 import SVGCode from './svgCode'
@@ -27,11 +26,9 @@ function Home({ isDark, toggleDarkMode }) {
   })
 
   const [waveSvg, setWaveSvg] = useState(waveInit(wave))
-  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     setWaveSvg(waveInit(wave))
-    setLoading(false)
   }, [wave])
 
   const { height, xmlns, path } = waveSvg.svg
@@ -83,8 +80,6 @@ function Home({ isDark, toggleDarkMode }) {
     saveSvgAsPng.saveSvgAsPng(document.getElementById('bg-svg'), 'svg.png')
   }
 
-  if (loading) return <Loader />
-
   return (
     <div className="relative h-screen dark:bg-darkish-black">
       <Navbar isDark={isDark} toggleDarkMode={toggleDarkMode} color={bgColor} />
diff --git a/src/components/loader.jsx b/src/components/loader.jsx
deleted file mode 100644
index 701cbc4..0000000
--- a/src/components/loader.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { h } from 'preact'
-import './../styles/loader.css'
-
-function Loader() {
-  return (
-    <div className="loader-container">
-      <div className="loader"></div>
-    </div>
-  )
-}
-
-export default Loader
diff --git a/src/index.html b/src/index.html
index cc0628b..a9b699a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -42,6 +42,7 @@
     />
     <meta property="twitter:image" content="./assets/bg.png" />
     <link rel="shortcut icon" href="./assets/3-01.svg" />
+    <link rel="stylesheet" href="/styles/loader.css" />
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script
@@ -60,5 +61,23 @@
   </head>
   <body>
     <div id="app"></div>
+    <div class="loader-container">
+      <div class="loader"></div>
+    </div>
   </body>
+
+  <script>
+    document.onreadystatechange = function () {
+      const state = document.readyState
+      if (state === 'interactive') {
+        document.querySelector('#app').style.display = 'none'
+      } else if (state === 'complete') {
+        // setTimeout can be used to test the loader.
+        // setTimeout(function () {
+        document.querySelector('.loader-container').style.display = 'none'
+        document.querySelector('#app').style.display = 'block'
+        // }, 3000)
+      }
+    }
+  </script>
 </html>