added lazy loading

package.json

@@ -19,6 +19,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
+    "react-lazyload": "^2.6.5",
     "styled-components": "^5.0.1"
   },
   "devDependencies": {

src/components/Loading.js

@@ -0,0 +1,12 @@
+import React from "react"
+import styled from "styled-components"
+import spinner from "../images/loading.gif"
+export default function Loading() {
+  return (
+    <Loader>
+      <img src={spinner} alt="loading..."></img>
+    </Loader>
+  )
+}
+
+const Loader = styled.div``

src/components/Mains/MainHome.js

@@ -5,6 +5,8 @@ import Button from "../Button"
 import Record from "../Record"
 import { Link } from "gatsby"
 import theme from "../../constants/theme.json"
+import Loading from "../../components/Loading"
+import LazyLoad from "react-lazyload"
 /// pictures :
 import homeHead from "../../images/super_woman.svg"
 import homeAbout from "../../images/logo.svg"
@@ -16,10 +18,10 @@ import marker from "../../images/icons/marker.svg"
 import event from "../../images/icons/event_icon.svg"
 import EditionCard from "../../components/editionCard"
 import ReverseEditionCard from "../../components/ReverseEditionCard"
-import yassir from "../../images/partners/yassir-seeklogo.com.svg"
 import techno from "../../images/partners/techno.png"
 import soc from "../../images/partners/societe.png"
 import sai from "../../images/partners/schoolai.png"
+
 export default function MainHome() {
   return (
     <Wrapper>
@@ -52,10 +54,14 @@ export default function MainHome() {
             Register
           </Button>
         </Content>
-        <CustomImg src={homeHead} alt="Landing image"></CustomImg>
+        <LazyLoad key="mainhead" placeholder={<Loading></Loading>}>
+          <CustomImg src={homeHead} alt="Landing image"></CustomImg>
+        </LazyLoad>
       </Section>
       <Section2>
-        <CustomImg2 src={homeAbout} alt="Event Logo"></CustomImg2>
+        <LazyLoad key="eventlogo" placeholder={<Loading></Loading>}>
+          <CustomImg2 src={homeAbout} alt="Event Logo"></CustomImg2>
+        </LazyLoad>
         <Content>
           <h5>ABOUT THE EVENT</h5>
           <Title>International Women's Day 2020</Title>

src/components/Track.js

@@ -1,10 +1,14 @@
 import React from "react"
 import styled from "styled-components"
-
+import Loading from "../components/Loading"
+import LazyLoad from "react-lazyload"
 export default function Track({ imgsource, altimg, title, content }) {
   return (
     <Container>
-      <Logo src={imgsource} alt={altimg}></Logo>
+      <LazyLoad key={altimg} placeholder={<Loading></Loading>}>
+        <Logo src={imgsource} alt={altimg}></Logo>
+      </LazyLoad>
+
       <Content>
         <h3>{title}</h3>
         <p>{content}</p>

src/components/speakerCard.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { Link } from "gatsby"
+import Loading from "../components/Loading"
+import LazyLoad from "react-lazyload"
 import styled from "styled-components"
 import theme from "../constants/theme.json"
 const StyltedCArd = styled.div`
@@ -124,7 +125,9 @@ const SpeakerCard = ({
       */}
 
     <ProfilePic>
-      <img src={picture} alt="profiles" />
+      <LazyLoad key={name} placeholder={<Loading></Loading>}>
+        <img src={picture} alt="profiles" />
+      </LazyLoad>
     </ProfilePic>
     <h1> {name} </h1>
     <h2> {role} </h2>

src/content/talks/talks.json

@@ -8,19 +8,19 @@
         "title": "Zoom in modern web/mobile development",
         "content": "The shape of web and mobile apps development have been and still changing in a non-stop manner, but nowadays almost all major dev options have implemented a set of common key concepts influenced by the huge advancements around the web dev ecosystem.",
         "img": "dev.svg",
-        "alt": "talk"
+        "alt": "mobileDev"
     },
 
     {
         "title": "How AI and Big Data are shaping our world view",
         "content": "Should you trust your own opinions? In this talk Hichem Bouzara will explain the process through which Artificial Intelligence algorithms relying on Big Data are effectively shaping our points of view without us knowing it.",
         "img": "bigdata.svg",
-        "alt": "talk"
+        "alt": "AI"
     },
     {
         "title": "How to design Human - Centered AI Products ? ",
         "content": "confused with development of ai products ? don't know where to start ? this talk will help you get a clearer vision about it and guide you through the process of designing human centered ai product",
         "img": "designAI.svg",
-        "alt": "talk"
+        "alt": "AI2"
     }
 ]

src/pages/about.js

@@ -1,4 +1,6 @@
 import React from "react"
+import Loading from "../components/Loading"
+import LazyLoad from "react-lazyload"
 import Layout from "../components/layout/layout"
 import SEO from "../components/seo"
 import styled from "styled-components"
@@ -281,7 +283,9 @@ export default function about() {
       </StyleadHead>
       <DetailContent>
         <ImgContainer>
-          <img src={require("../images/super_woman.svg")} alt="about IWD" />
+          <LazyLoad key="super_woman" placeholder={<Loading></Loading>}>
+            <img src={require("../images/super_woman.svg")} alt="about IWD" />
+          </LazyLoad>
         </ImgContainer>
         <Content>
           <h5>ABOUT THE EVENT</h5>

src/pages/agenda.js

@@ -4,6 +4,8 @@ import SEO from "../components/seo"
 import styled from "styled-components"
 import theme from "../constants/theme.json"
 import { MainWrapper as Wrapper } from "../components/Container"
+import Loading from "../components/Loading"
+import LazyLoad from "react-lazyload"
 import agendapic from "../images/agenda-svg.svg"
 // TODO : Implement Page
 // TODO : Add Agenda to the page ( the actual agenda)
@@ -33,7 +35,9 @@ export default function agenda() {
     <Layout>
       <SEO title="Agenda"></SEO>
       <Wrapper>
-        <Agenda src={agendapic} alt="agenda of event"></Agenda>
+        <LazyLoad key="agenda" placeholder={<Loading></Loading>}>
+          <Agenda src={agendapic} alt="agenda of event"></Agenda>
+        </LazyLoad>
       </Wrapper>
     </Layout>
   )