Skip to content

Commit c680e83

Browse files
sudeensudeen
committed
lazy loading for images integrated
1 parent 33a5777 commit c680e83

File tree

8 files changed

+2908
-4424
lines changed

8 files changed

+2908
-4424
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ yarn-error.log*
1616

1717
# Next.js
1818
/.next
19+
20+
.now

Diff for: ‎package-lock.json

+2,821-4,365
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+12-11
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,24 @@
33
"version": "4.0.0",
44
"private": true,
55
"dependencies": {
6-
"@material-ui/core": "^4.9.7",
7-
"@material-ui/icons": "^4.9.1",
8-
"@material-ui/styles": "^4.9.6",
6+
"@material-ui/core": "^4.11.2",
7+
"@material-ui/icons": "^4.11.2",
8+
"@material-ui/styles": "^4.11.2",
99
"axios": "^0.19.2",
10-
"clsx": "^1.1.0",
10+
"clsx": "^1.1.1",
1111
"fontfaceobserver": "^2.1.0",
12-
"fs-extra": "^9.0.0",
12+
"fs-extra": "^9.0.1",
1313
"imagemin-mozjpeg": "^8.0.0",
1414
"imagemin-optipng": "^7.1.0",
1515
"install": "^0.13.0",
16-
"next": "^9.3.1",
17-
"next-compose-plugins": "^2.2.0",
18-
"next-optimized-images": "^2.5.5",
19-
"npm": "^6.14.4",
16+
"next": "^9.5.5",
17+
"next-compose-plugins": "^2.2.1",
18+
"next-optimized-images": "^2.6.2",
19+
"npm": "^6.14.11",
2020
"prop-types": "^15.7.2",
21-
"react": "^16.13.1",
22-
"react-dom": "^16.13.1",
21+
"react": "^16.14.0",
22+
"react-dom": "^16.14.0",
23+
"react-lazy-load-image-component": "^1.5.1",
2324
"react-lottie": "^1.2.3"
2425
},
2526
"scripts": {

Diff for: ‎pages/_app.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import Header from "../src/ui/Header";
77
import Footer from "../src/ui/Footer";
88
import Fonts from "../src/ui/Fonts";
99

10+
import { LazyLoadComponent } from "react-lazy-load-image-component";
11+
1012
export default class MyApp extends App {
1113
constructor(props) {
1214
super(props);
@@ -56,10 +58,12 @@ export default class MyApp extends App {
5658
setSelectedIndex={this.setSelectedIndex}
5759
setValue={this.setValue}
5860
/>
59-
<Footer
60-
setSelectedIndex={this.setSelectedIndex}
61-
setValue={this.setValue}
62-
/>
61+
<LazyLoadComponent threshold={400}>
62+
<Footer
63+
setSelectedIndex={this.setSelectedIndex}
64+
setValue={this.setValue}
65+
/>
66+
</LazyLoadComponent>
6367
</ThemeProvider>
6468
</React.Fragment>
6569
);

Diff for: ‎pages/_document.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
2-
import Document, { Head, Main, NextScript } from "next/document";
2+
import Document, { Html, Head, Main, NextScript } from "next/document";
33
import { ServerStyleSheets } from "@material-ui/core/styles";
44
import Theme from "../src/ui/Theme";
55

66
export default class MyDocument extends Document {
77
render() {
88
return (
9-
<html lang="en">
9+
<Html lang="en">
1010
<Head>
1111
{/* PWA primary color */}
1212
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,7 +29,7 @@ export default class MyDocument extends Document {
2929
<Main />
3030
<NextScript />
3131
</body>
32-
</html>
32+
</Html>
3333
);
3434
}
3535
}

Diff for: ‎pages/index.js

+21-7
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import CallToAction from "../src/ui/CallToAction";
1515

1616
import animationData from "../src/animations/landinganimation/data";
1717

18+
import {
19+
LazyLoadImage,
20+
LazyLoadComponent,
21+
} from "react-lazy-load-image-component";
22+
1823
const useStyles = makeStyles((theme) => ({
1924
animation: {
2025
maxWidth: "50em",
@@ -115,6 +120,8 @@ const useStyles = makeStyles((theme) => ({
115120
},
116121
},
117122
infoBackground: {
123+
position: "absolute",
124+
zIndex: "-1",
118125
backgroundImage: `url("/assets/infoBackground.svg")`,
119126
backgroundPosition: "center",
120127
backgroundSize: "cover",
@@ -249,7 +256,7 @@ export default function LandingPage(props) {
249256
</Button>
250257
</Grid>
251258
<Grid item>
252-
<img
259+
<LazyLoadImage
253260
className={classes.icon}
254261
alt="custom software icon"
255262
src="/assets/customSoftwareIcon.svg"
@@ -298,7 +305,7 @@ export default function LandingPage(props) {
298305
</Button>
299306
</Grid>
300307
<Grid item style={{ marginRight: matchesSM ? 0 : "5em" }}>
301-
<img
308+
<LazyLoadImage
302309
className={classes.icon}
303310
alt="mobile phone icon"
304311
src="/assets/mobileIcon.svg"
@@ -348,7 +355,7 @@ export default function LandingPage(props) {
348355
</Button>
349356
</Grid>
350357
<Grid item>
351-
<img
358+
<LazyLoadImage
352359
className={classes.icon}
353360
alt="website icon"
354361
src="/assets/websiteIcon.svg"
@@ -399,17 +406,18 @@ export default function LandingPage(props) {
399406
</Grid>
400407
</CardContent>
401408
</Card>
402-
<div className={classes.revolutionBackground} />
409+
<LazyLoadComponent threshold={850}>
410+
<div className={classes.revolutionBackground} />
411+
</LazyLoadComponent>
403412
</Grid>
404413
</Grid>
405414
{/*-----Information Block-----*/}
406415
<Grid item>
407416
<Grid
408417
container
409-
style={{ height: "80em" }}
418+
style={{ height: "47em" }}
410419
alignItems="center"
411420
direction="row"
412-
className={classes.infoBackground}
413421
>
414422
{/* Wrapping up both contact us and about us card */}
415423
<Grid
@@ -489,11 +497,17 @@ export default function LandingPage(props) {
489497
</Grid>
490498
</Grid>
491499
</Grid>
500+
<LazyLoadComponent threshold={850}>
501+
<div className={classes.infoBackground} />
502+
</LazyLoadComponent>
492503
</Grid>
493504
</Grid>
494505
{/* Call To Action Block */}
506+
495507
<Grid item>
496-
<CallToAction setValue={props.setValue} />
508+
<LazyLoadComponent threshold={850}>
509+
<CallToAction setValue={props.setValue} />
510+
</LazyLoadComponent>
497511
</Grid>
498512
</Grid>
499513
);

Diff for: ‎pages/revolution.js

+23-10
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import technologyAnimation from "../src/animations/technologyAnimation/data.json
1010

1111
import CallToAction from "../src/ui/CallToAction";
1212

13+
import { LazyLoadImage } from "react-lazy-load-image-component";
14+
1315
const useStyles = makeStyles((theme) => ({
1416
rowContainer: {
1517
paddingLeft: "5em",
@@ -74,7 +76,9 @@ export default function Revolution(props) {
7476
style={{ marginTop: "5em" }}
7577
>
7678
<Grid item lg>
77-
<img
79+
<LazyLoadImage
80+
threshold={400}
81+
age
7882
src="/assets/vision.svg"
7983
alt="Mountain through binoculars"
8084
style={{
@@ -320,7 +324,8 @@ export default function Revolution(props) {
320324
</Grid>
321325
</Grid>
322326
<Grid item lg style={{ alignSelf: "center" }}>
323-
<img
327+
<LazyLoadImage
328+
threshold={400}
324329
src="/assets/consultationIcon.svg"
325330
alt="handshake"
326331
width="100%"
@@ -386,7 +391,8 @@ export default function Revolution(props) {
386391
</Grid>
387392
</Grid>
388393
<Grid item lg style={{ alignSelf: "center" }}>
389-
<img
394+
<LazyLoadImage
395+
threshold={400}
390396
src="/assets/mockupIcon.svg"
391397
alt="basic website design outline"
392398
width="100%"
@@ -453,7 +459,8 @@ export default function Revolution(props) {
453459
</Grid>
454460
</Grid>
455461
<Grid item lg style={{ alignSelf: "center" }}>
456-
<img
462+
<LazyLoadImage
463+
threshold={400}
457464
src="/assets/reviewIcon.svg"
458465
alt="magnifying glass"
459466
width="100%"
@@ -510,7 +517,8 @@ export default function Revolution(props) {
510517
</Grid>
511518
</Grid>
512519
<Grid item lg style={{ alignSelf: "center" }}>
513-
<img
520+
<LazyLoadImage
521+
threshold={400}
514522
src="/assets/designIcon.svg"
515523
alt="paint brush leaving stroke of paint"
516524
width="100%"
@@ -567,7 +575,8 @@ export default function Revolution(props) {
567575
</Grid>
568576
</Grid>
569577
<Grid item lg style={{ alignSelf: "center" }}>
570-
<img
578+
<LazyLoadImage
579+
threshold={400}
571580
src="/assets/reviewIcon.svg"
572581
alt="magnifying glass"
573582
width="100%"
@@ -661,7 +670,8 @@ export default function Revolution(props) {
661670
</Grid>
662671
</Grid>
663672
<Grid item lg style={{ alignSelf: "center" }}>
664-
<img
673+
<LazyLoadImage
674+
threshold={400}
665675
src="/assets/buildIcon.svg"
666676
alt="building construction site"
667677
width="100%"
@@ -728,7 +738,8 @@ export default function Revolution(props) {
728738
</Grid>
729739
</Grid>
730740
<Grid item lg style={{ alignSelf: "center" }}>
731-
<img
741+
<LazyLoadImage
742+
threshold={400}
732743
src="/assets/launchIcon.svg"
733744
alt="rocket"
734745
width="100%"
@@ -794,7 +805,8 @@ export default function Revolution(props) {
794805
</Grid>
795806
</Grid>
796807
<Grid item lg style={{ alignSelf: "center" }}>
797-
<img
808+
<LazyLoadImage
809+
threshold={400}
798810
src="/assets/maintainIcon.svg"
799811
alt="wrench tightening bolts"
800812
width="100%"
@@ -862,7 +874,8 @@ export default function Revolution(props) {
862874
</Grid>
863875
</Grid>
864876
<Grid item lg style={{ alignSelf: "center" }}>
865-
<img
877+
<LazyLoadImage
878+
threshold={400}
866879
src="/assets/iterateIcon.svg"
867880
alt="falling dominoes"
868881
width="100%"

Diff for: ‎src/ui/Header.js

+18-24
Original file line numberDiff line numberDiff line change
@@ -242,31 +242,25 @@ export default function Header(props) {
242242
{ name: "About Us", link: "/about", activeIndex: 4 },
243243
];
244244

245-
// REACT useEffect hook
245+
const path = typeof window !== "undefined" ? window.location.search : null;
246+
247+
const activeIndex = () => {
248+
const found = routes.find((route) => route.link === path);
249+
const menuFound = menuOptions.find(({ link }) => link === path);
250+
251+
if (menuFound) {
252+
props.setValue(1);
253+
props.setSelectedIndex(menuFound.selectedIndex);
254+
} else if (found === undefined) {
255+
props.setValue(false);
256+
} else {
257+
props.setValue(found.activeIndex);
258+
}
259+
};
260+
246261
useEffect(() => {
247-
[...menuOptions, ...routes].forEach((route) => {
248-
switch (window.location.pathname) {
249-
case `${route.link}`:
250-
if (props.value !== route.activeIndex) {
251-
props.setValue(route.activeIndex);
252-
if (
253-
route.selectedIndex &&
254-
route.selectedIndex !== props.selectedIndex
255-
) {
256-
props.setSelectedIndex(route.selectedIndex);
257-
}
258-
}
259-
break;
260-
case "/estimate":
261-
if (props.value !== 5) {
262-
props.setValue(5);
263-
}
264-
break;
265-
default:
266-
break;
267-
}
268-
});
269-
}, [props.value, menuOptions, props.selectedIndex, routes, props]);
262+
activeIndex();
263+
}, [path]);
270264

271265
// TABS
272266
const tabs = (

0 commit comments

Comments
 (0)