Added lazy loading of images for both TS and JS supported components #599

abhushanaj · 2020-03-10T08:33:17Z

fixes #583
Implemented the lazy loading of images concept for both components written in JS and TS.
Breaking Changes: Addition of 2 new npm packages to achieve the same tasks mentioned above.

hound · 2020-03-10T08:33:26Z

src/ignitus-WhatWeDo/Styles/index.js

@@ -2,6 +2,7 @@
 import styled from '@emotion/styled';
 import * as C from '../../ignitus-Helpers/emotion-Styles/colors';
 import * as F from '../../ignitus-Helpers/emotion-Styles/font';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:26Z

src/ignitus-StudentSignUp/Components/Signup.js

@@ -9,6 +9,7 @@ import isEqual from 'lodash/isEqual';
 import loader from '../../ignitus-Assets/Images/loader2.gif';
 import * as t from './Constants';
 import { withErrorBoundary } from '../../ignitus-Internals';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:26Z

src/ignitus-ProfessorSignUp/Components/Signup.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import * as t from './Constants';
 import { withErrorBoundary } from '../../ignitus-Internals';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:27Z

src/ignitus-Introduction/Components/Introduction.js

@@ -40,7 +41,7 @@ const Introduction = () => (
            </button>
          </Link>
        </div>
-        <img className="img-fluid" src={t.resume} alt="resume" />
+        <LazyLoadImage  className="img-fluid" src={t.resume} alt="resume" />


Multiple spaces found before 'className' no-multi-spaces

hound · 2020-03-10T08:33:27Z

src/ignitus-Introduction/Components/Introduction.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import '../Styles/style.scss';
 import { withErrorBoundary } from '../../ignitus-Internals';
 import * as t from './Constants';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:27Z

src/ignitus-Footer/Components/Footer.js

@@ -103,7 +104,7 @@ const PureFooter = ({
        <div className="col-md-2 mx-auto pd-left">
          <ul className="list-unstyled">
            <li>
-              <img src={logo} className="img-responsive img-css" alt="logo" />
+                <LazyLoadImage  src={logo} className="img-responsive img-css" alt="logo" />


Expected indentation of 14 space characters but found 16 react/jsx-indent
Multiple spaces found before 'src' no-multi-spaces

hound · 2020-03-10T08:33:28Z

src/ignitus-Footer/Components/Footer.js

@@ -7,6 +7,7 @@ import { HashLink } from 'react-router-hash-link';
 import { Link } from 'react-router-dom';
 import { withErrorBoundary } from '../../ignitus-Internals';
 import { logo } from './Constants';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:28Z

src/ignitus-Dashboard-Header/Components/dashBoardHeader.js

@@ -8,6 +8,7 @@ import { Redirect, Link } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import logo from '../../ignitus-Assets/Images/nav-logo.svg';
 import { withErrorBoundary } from '../../ignitus-Internals';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:28Z

src/ignitus-Common-Auth-Student-Prof/Components/commonSignUpUI.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { withErrorBoundary } from '../../ignitus-Internals';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

hound · 2020-03-10T08:33:29Z

src/ignitus-Common-Auth-Student-Prof/Components/commonLoginUI.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { withErrorBoundary } from '../../ignitus-Internals';
+import { LazyLoadImage } from 'react-lazy-load-image-component';


Absolute imports should come before relative imports import/first

codecov · 2020-03-10T08:34:53Z

Codecov Report

Merging #599 into master will not change coverage.
The diff coverage is n/a.

@@              Coverage Diff              @@
##              master        #599   +/-   ##
=============================================
  Coverage   18.95425%   18.95425%           
=============================================
  Files             76          76           
  Lines            612         612           
  Branches         129         129           
=============================================
  Hits             116         116           
  Misses           496         496

Impacted Files	Coverage Δ
...tus-Dashboard-Header/Components/dashBoardHeader.js	`0% <0%> (ø)`	⬆️
after/src/ignitus-Footer/Components/Footer.js	`8% <0%> (ø)`	⬆️
...mon-Auth-Student-Prof/Components/commonSignUpUI.js	`50% <0%> (ø)`	⬆️
...rc/ignitus-Introduction/Components/Introduction.js	`50% <0%> (ø)`	⬆️
...mmon-Auth-Student-Prof/Components/commonLoginUI.js	`50% <0%> (ø)`	⬆️
after/src/ignitus-WhatWeDo/Styles/index.js	`100% <0%> (ø)`	⬆️
...ter/src/ignitus-StudentSignUp/Components/Signup.js	`3.7037% <0%> (ø)`	⬆️
...r/src/ignitus-ProfessorSignUp/Components/Signup.js	`0% <0%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d206558...48c1210. Read the comment docs.

divyanshu-rawat

@abhu-A-J Your work looks good to me, I will have a through look in evening, although page insights is not complaining about images now, here is the report, https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdeploy-preview-599--peaceful-nightingale-55a1b7.netlify.com%2F&tab=desktop

The problem that I see now this PR has effected the speed index, like this is the report that don't have changes in this PR - s https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.ignitus.org%2F&tab=desktop

As per bundlephobia I think npm package has effected the time to load by some ms, https://bundlephobia.com/[email protected].

Not sure can you investigate further :) cc @debck , @gittysachin .

gittysachin

Great job @abhu-A-J. But the time of first-input-delay has increased, not every time but sometimes when the browser will deal heavy loads then it will affect the response to any clicked link or button pressed. @divyanshu-rawat it's because of the react-lazy-load-image-component package. And this npm package is the reason for slightly increased load time as well.

divyanshu-rawat · 2020-03-10T12:50:48Z

@gittysachin there is improvement in Max Potential First Input Delay, Time to Interactive.

abhushanaj · 2020-03-10T13:00:03Z

@divyanshu-rawat @gittysachin my two cents on this matter.

I can see font awesome icons are used very less around 9 of them on about us page and footer), but we'rehaving an npm package for the entire thing. We can easily replace with SVG's and it will reduce bundle size as well.
Here's the report from bundlephobia

The images used all all format aren't really compressed that well, a lot of improvements can be done. Here's what I achieved on manual compression.

In the background the image when compressed could save about 64%.

The resume.svg although not that much still 28.2% save is there. Here a picture:

gittysachin · 2020-03-10T13:00:58Z

@gittysachin there is improvement in Max Potential First Input Delay, Time to Interactive.

@divyanshu-rawat It's showing completely different result now. Last time when I checked, it was showing results as I previously described. It's continuously changing for me as I refresh the results.

divyanshu-rawat · 2020-03-10T13:16:28Z

@divyanshu-rawat @gittysachin my two cents on this matter.

I can see font awesome icons are used very less around 9 of them on about us page and footer), but we'rehaving an npm package for the entire thing. We can easily replace with SVG's and it will reduce bundle size as well.

The images used all all format aren't really compressed that well, a lot of improvements can be done. Here's what I achieved on manual compression.

In the background the image when compressed could save about 64%.

The resume.svg although not that much still 28.2% save is there. Here a picture:

@abhu-A-J thanks a lot sound good, but now question arises how should we compress the used images? I think the current format is png. I know one to compress svg images, https://jakearchibald.github.io/svgomg/ but unfortunately we are serving png.

One solution is to have an component to render svg images, something like,

type Props = HTMLAttributes<SVGElement>;

const Icon = (props : Props) => {
	return (
		<svg aria-label={title} role="img" viewBox="0 0 100 100" 
                   xmlns="http://www.w3.org/2000/svg" {...rest}>
		</svg>
	);
};

export default Icon;

And the font-awesome thing you mentioned #479 address that.
What do you think what should be the approach according to you? cc @gittysachin

divyanshu-rawat · 2020-03-10T13:16:55Z

@gittysachin there is improvement in Max Potential First Input Delay, Time to Interactive.

@divyanshu-rawat It's showing completely different result now. Last time when I checked, it was showing results as I previously described. It's continuously changing for me as I refresh the results.

I also tried it, results seems to be different one opening it again.

divyanshu-rawat · 2020-03-17T23:30:45Z

@abhu-A-J sorry to say, Here I think cost of module is more in comparison to that of value, we are closing it for now keeping in mind the merge conflicts as well. :) thanks for your efforts we really appreciate it, Hope you might have learned some stuff while working in THIS PR 👍

We are removing dependency on font-awesome like this way. https://github.com/Ignitus/Ignitus-client/tree/develop/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons

Feel free to let us know your views on the same.

abhushanaj · 2020-03-18T04:45:44Z

@abhu-A-J sorry to say, Here I think cost of module is more in comparison to that of value, we are closing it for now keeping in mind the merge conflicts as well. :) thanks for your efforts we really appreciate it, Hope you might have learned some stuff while working in THIS PR 👍

We are removing dependency on font-awesome like this way. https://github.com/Ignitus/Ignitus-client/tree/develop/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons

Feel free to let us know your views on the same.

@divyanshu-rawat Ah! Feels bad that this couldn't make a difference to the repo, but no issues I understand your point. I'll look towards other issues and hopefully try to contribute in a better way. Loving the experience btw!!

Added lazy loading of images for both TS and JS supported components

48c1210

auto-assign bot requested review from debck, divyanshu-rawat, gittysachin and Paarmita March 10, 2020 08:33

pr-triage bot added the PR: unreviewed label Mar 10, 2020

hound bot reviewed Mar 10, 2020

View reviewed changes

divyanshu-rawat reviewed Mar 10, 2020

View reviewed changes

gittysachin reviewed Mar 10, 2020

View reviewed changes

divyanshu-rawat added gssoc20 Girls script summer of code 2020. medium Something that is somewhat complex to work on. labels Mar 12, 2020

divyanshu-rawat changed the base branch from master to develop March 12, 2020 13:06

divyanshu-rawat closed this Mar 17, 2020

divyanshu-rawat mentioned this pull request Apr 16, 2020

feat: added lazyloading for images #775

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added lazy loading of images for both TS and JS supported components #599

Added lazy loading of images for both TS and JS supported components #599

abhushanaj commented Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

codecov bot commented Mar 10, 2020 •

edited

Loading

divyanshu-rawat left a comment •

edited

Loading

gittysachin left a comment

divyanshu-rawat commented Mar 10, 2020

abhushanaj commented Mar 10, 2020 •

edited

Loading

gittysachin commented Mar 10, 2020 •

edited

Loading

divyanshu-rawat commented Mar 10, 2020 •

edited

Loading

divyanshu-rawat commented Mar 10, 2020

divyanshu-rawat commented Mar 17, 2020

abhushanaj commented Mar 18, 2020

Added lazy loading of images for both TS and JS supported components #599

Added lazy loading of images for both TS and JS supported components #599

Conversation

abhushanaj commented Mar 10, 2020

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

codecov bot commented Mar 10, 2020 • edited Loading

Codecov Report

divyanshu-rawat left a comment • edited Loading

Choose a reason for hiding this comment

gittysachin left a comment

Choose a reason for hiding this comment

divyanshu-rawat commented Mar 10, 2020

abhushanaj commented Mar 10, 2020 • edited Loading

gittysachin commented Mar 10, 2020 • edited Loading

divyanshu-rawat commented Mar 10, 2020 • edited Loading

divyanshu-rawat commented Mar 10, 2020

divyanshu-rawat commented Mar 17, 2020

abhushanaj commented Mar 18, 2020

codecov bot commented Mar 10, 2020 •

edited

Loading

divyanshu-rawat left a comment •

edited

Loading

abhushanaj commented Mar 10, 2020 •

edited

Loading

gittysachin commented Mar 10, 2020 •

edited

Loading

divyanshu-rawat commented Mar 10, 2020 •

edited

Loading