Skip to content

Commit

Permalink
add lazy loading and loading gif
Browse files Browse the repository at this point in the history
  • Loading branch information
@JessicaML
JessicaML committed Jan 29, 2021
1 parent 0d0c265 commit cc26b35
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 210 deletions.
Binary file added app/assets/images/loader.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 21 additions & 11 deletions app/javascript/bundles/Container/components/Container.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
import React from "react";
import About from "./About";
import FeaturedLessons from "./FeaturedLessons";
import Testimonials from "./Testimonials";
import MailingList from "./MailingList";
import React, { lazy, Suspense } from "react";
import Loader from "../../../../assets/images/loader.gif";

const Container = () => (
<div className="nav-container">
<About />
<FeaturedLessons />
<Testimonials />
<MailingList />
const About = lazy(() => import("./About"));
const FeaturedLessons = lazy(() => import("./FeaturedLessons"));
const Testimonials = lazy(() => import("./Testimonials"));
const MailingList = lazy(() => import("./MailingList"));

const renderLoader = () => (
<div className="loadingImage">
<img src={Loader} alt="loading image" />
</div>
);

const Container = () => (
<Suspense fallback={renderLoader()}>
<div className="nav-container">
<About />
<FeaturedLessons />
<Testimonials />
<MailingList />
</div>
</Suspense>
);

export default Container;
204 changes: 5 additions & 199 deletions app/javascript/bundles/Container/components/__snapshots__/Container.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,205 +2,11 @@

exports[`Container renders correctly when there are no items 1`] = `
<div
className="nav-container"
className="loadingImage"
>
<div
id="skrollr-body"
>
<div
data-0="background-image: linear-gradient(90deg, hsl(172, 100%, 50%), hsl(318, 68%, 68%)"
data-450="background-image: linear-gradient(450deg, hsl(172, 100%, 50%), hsl(318, 68%, 68%)"
>
<div
className="aboutWrapper"
>
<div
className="imgItems"
>
<img
alt="test tube"
src="test-file-stub"
/>
<img
alt="test tube"
src="test-file-stub"
/>
<img
alt="face"
src="test-file-stub"
/>
<img
alt="test tube"
src="test-file-stub"
/>
</div>
<div
className="header"
>
<h1>
ScienceMotions
</h1>
<p>
Biology, chemistry and physics lessons from the future.
</p>
<p>
<a
href="#featuredLessons"
>
see more
</a>
</p>
</div>
<div
className="imgItems"
>
<img
alt="face"
src="test-file-stub"
/>
<img
alt="test tube"
src="test-file-stub"
/>
<img
alt="test tube"
src="test-file-stub"
/>
<img
alt="test tube"
src="test-file-stub"
/>
</div>
</div>
</div>
</div>
<section
className="featuredLessonsWrapper"
id="featuredLessons"
>
<div
className="header"
>
<h1>
Featured Lessons
</h1>
</div>
<div
className="links"
>
<a
href="lessons/Indicators"
>
<h1>
Indicators
</h1>
</a>
<a
href="lessons/CellsTissuesOrgans"
>
<h1>
Cells, Tissues, Organs
</h1>
</a>
<a
href="lessons/DNA"
>
<h1>
DNA
</h1>
</a>
</div>
</section>
<section
className="testimonialsWrapper"
id="third"
>
<div
className="header"
>
<h1>
Testimonials
</h1>
</div>
<div
className="testimonials"
>
<div>
<i>
“It looks really cool! I use GCSE Bitesize but it doesn’t always explain things that well.”
</i>
<p>
Blessing, GCSE Student, Brixton
</p>
</div>
<div>
<i>
“This looks like it would be very helpful. Right now I use Gojimo, but it just uses lots of questions”
</i>
<p>
Joseph, A-Level Biology Student, Camberwell
</p>
</div>
</div>
</section>
<footer
className="footer"
>
<form
action="https://github.us16.list-manage.com/subscribe/post?u=70d8e0ea2d8800a5f4e06792c&id=b5095bc718"
method="post"
name="mc-embedded-subscribe-form"
target="_blank"
>
<div
id="mc_embed_signup_scroll"
>
<div>
<span
style={
Object {
"color": "#fff",
}
}
>
<i>
<p>
Science is about how shapes move in space, so we think animation is the best way to explain it... and we want to explain it in a way that's as fun to look at as MTV.
</p>
</i>
</span>
</div>
</div>
<div
className="mailchimp"
>
<label
htmlFor="mce-EMAIL"
>
Subscribe to our mailing list!
</label>
<div>
<label
htmlFor="MERGE0"
>
<input
autoCapitalize="off"
autoCorrect="off"
id="MERGE0"
name="EMAIL"
onChange={[Function]}
type="email"
value=""
/>
</label>
<input
className="button"
name="subscribe"
type="submit"
/>
</div>
</div>
</form>
</footer>
<img
alt="loading image"
src="test-file-stub"
/>
</div>
`;
1 change: 1 addition & 0 deletions app/javascript/scimo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import "./styles/SolarSystem.scss";
import "./styles/AlkaliMetals.scss";
import "./styles/GroupsPeriods.scss";

import "./styles/Container.scss";
import "./styles/About.scss";
import "./styles/FeaturedLessons.scss";
import "./styles/Testimonials.scss";
Expand Down
9 changes: 9 additions & 0 deletions app/javascript/scimo/styles/Container.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.loadingImage {
display: flex;
justify-content: center;
margin: 50px 0;

img {
width: 300px;
}
}

0 comments on commit cc26b35

Please sign in to comment.