Home page load (#12)

* style: loading animation for homepage

* fix: bug with category seletor

src/modules/CategorySelector/CategorySelector.jsx

@@ -51,7 +51,7 @@ class CategorySelector extends React.Component {
     return (
       <div ref={this.container}>
         <div
-          style={open ? { display: 'block' } : { display: 'none' }}
+          style={open ? { visible: 'block' } : { display: 'none' }}
           className={styles.open}
         >
           <div className={styles.openHeader}>
@@ -77,7 +77,7 @@ class CategorySelector extends React.Component {
         </div>
 
         <button
-          style={open ? { display: 'none' } : { display: 'flex' }}
+          style={open ? { visibility: 'hidden' } : { visibility: 'visible' }}
           className={[styles.closed, styles[category]].join(' ')}
           type="button"
           onClick={this.toggle}

src/modules/CategorySelector/CategorySelector.module.scss

@@ -63,6 +63,7 @@
 }
 
 .closed {
+  display: flex;
   width: 100%;
   margin: calculateRem(12) calculateRem(16);
   padding: calculateRem(10) calculateRem(15);

src/modules/Home/Home.jsx

@@ -2,11 +2,38 @@ import React from 'react'
 import RecentlyAdded from '../RecentlyAdded'
 import Categories from '../Categories'
 import Footer from '../Footer'
+import styles from './Home.module.scss'
 
-export default () => (
+class Home extends React.Component {
-  <>
+  constructor(props) {
-    <Categories />
+    super(props)
-    <RecentlyAdded />
+    this.startLoadingAnimation = this.startLoadingAnimation.bind(this)
-    <Footer />
+    this.state = { didMount: false }
-  </>
+  }
-)
+
+  componentDidMount() {
+    setTimeout(this.startLoadingAnimation, 0)
+  }
+
+  startLoadingAnimation() {
+    this.setState({ didMount: true })
+  }
+
+  render() {
+    const { didMount } = this.state
+
+    return (
+      <div
+        className={
+          didMount ? [styles.fade, styles.loaded].join(' ') : styles.fade
+        }
+      >
+        <Categories />
+        <RecentlyAdded />
+        <Footer />
+      </div>
+    )
+  }
+}
+
+export default Home

src/modules/Home/Home.module.scss

@@ -0,0 +1,8 @@
+.fade {
+  filter: contrast(0.8) opacity(0) blur(5px);
+}
+
+.loaded {
+  filter: contrast(1) opacity(1) blur(0);
+  transition: filter 0.5s ease-in;
+}