-
-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added lazy loading of images for both TS and JS supported components #599
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
import * as t from './Constants'; | ||
import '../Styles/style.scss'; | ||
|
||
|
@@ -17,14 +18,14 @@ const commonSignUpUI = () => ( | |
<div className="col-lg-5 col-md-5 ml-lg-5 ml-md-4 col-sm-5 col p-0 h-50 common-auth-ui-css"> | ||
<p className="mb-5 text-center common-ui-text">Student</p> | ||
<Link to="/signup/student" className=""> | ||
<img alt="Student auth" className="img-fluid" src={t.studentAuth} /> | ||
<LazyLoadImage alt="Student auth" className="img-fluid" src={t.studentAuth} /> | ||
</Link> | ||
</div> | ||
|
||
<div className="col-lg-5 col-md-5 ml-lg-4 ml-md-4 col-sm-5 ml-sm-4 col p-0 common-auth-ui-css"> | ||
<p className="mb-5 text-center common-ui-text">Professor</p> | ||
<Link to="/signup/professor" className=""> | ||
<img alt="Professor auth" className="img-fluid" src={t.professorAuth} /> | ||
<LazyLoadImage alt="Professor auth" className="img-fluid" src={t.professorAuth} /> | ||
</Link> | ||
</div> | ||
</div> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
|
||
class dashBoardHeader extends React.Component { | ||
constructor(props) { | ||
|
@@ -42,7 +43,7 @@ class dashBoardHeader extends React.Component { | |
<React.Fragment> | ||
<nav className="navbar navbar-expand-lg whitenav"> | ||
<HashLink className="navbar-brand" to="/#"> | ||
<img src={logo} width="40" height="40" alt="logo" /> | ||
<LazyLoadImage src={logo} width="40" height="40" alt="logo" /> | ||
</HashLink> | ||
<button | ||
className="navbar-toggler" | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
|
||
const PureFooter = ({ | ||
hideUnhide, featuresToggle, communityToggle, companyToggle, linkToggle, | ||
|
@@ -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" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Expected indentation of 14 space characters but found 16 react/jsx-indent |
||
</li> | ||
</ul> | ||
</div> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
import styled from '@emotion/styled'; | ||
import * as C from './colors'; | ||
import * as F from './font'; | ||
import {LazyLoadImage} from 'react-lazy-load-image-component'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. A space is required after '{' object-curly-spacing |
||
|
||
const breakpoints = [576, 768, 992, 1200]; | ||
const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); | ||
|
@@ -71,7 +72,7 @@ export const Container = styled.div` | |
} | ||
`; | ||
|
||
export const Avatar = styled.img``; | ||
export const Avatar = styled(LazyLoadImage)``; | ||
export const Link = styled.a``; | ||
|
||
export const flexibleColDiv = styled.div` | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
|
||
const Introduction = () => ( | ||
<div className="intro__wrapper"> | ||
|
@@ -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" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Multiple spaces found before 'className' no-multi-spaces |
||
</div> | ||
</div> | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
import '../Styles/style.scss'; | ||
|
||
class Signup extends React.Component { | ||
|
@@ -20,7 +21,7 @@ class Signup extends React.Component { | |
<div className="col-lg-8 container-custom p-5"> | ||
<div className="row shadow border-rad"> | ||
<div className="col-md-6 p-0 container-image"> | ||
<img className="img-fluid img-login d-block" src={t.professorAuth} alt="login" /> | ||
<LazyLoadImage className="img-fluid img-login d-block" src={t.professorAuth} alt="login" /> | ||
<div className="text-below-image text-center"> | ||
<p className="mb-5 ">Let's get started</p> | ||
<p>Help providing opportunities for your students</p> | ||
|
@@ -34,7 +35,7 @@ class Signup extends React.Component { | |
</div> | ||
<div className="col-md-6 container-form"> | ||
<div className="my-4"> | ||
<img className="img-fluid img mx-auto d-block" src={t.logo} alt="logo" /> | ||
<LazyLoadImage className="img-fluid img mx-auto d-block" src={t.logo} alt="logo" /> | ||
</div> | ||
<form> | ||
<div className="px-4"> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
|
||
import '../Styles/style.scss'; | ||
|
||
|
@@ -70,7 +71,7 @@ const Signup = ({ signUpRequest, studentSignUpData }) => { | |
<div className="col-lg-8 container-custom p-5"> | ||
<div className="row shadow border-rad"> | ||
<div className="col-md-6 p-0 container-image"> | ||
<img className="img-fluid img-login d-block" src={t.studentAuth} alt="login" /> | ||
<LazyLoadImage className="img-fluid img-login d-block" src={t.studentAuth} alt="login" /> | ||
<div className="text-below-image text-center"> | ||
<p className="mb-5 ">Let's get started</p> | ||
<p>Skyrocket your career with best global opportunities</p> | ||
|
@@ -84,7 +85,7 @@ const Signup = ({ signUpRequest, studentSignUpData }) => { | |
</div> | ||
<div className="col-md-6 container-form"> | ||
<div className="my-4"> | ||
<img className="img-fluid img mx-auto d-block" src={t.logo} alt="logo" /> | ||
<LazyLoadImage className="img-fluid img mx-auto d-block" src={t.logo} alt="logo" /> | ||
</div> | ||
|
||
{success && ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Absolute imports should come before relative imports import/first |
||
|
||
const breakpoints = [576, 768, 992, 1200]; | ||
const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`); | ||
|
@@ -36,7 +37,7 @@ export const Card = styled.div` | |
} | ||
`; | ||
|
||
export const CardPicture = styled.img` | ||
export const CardPicture = styled(LazyLoadImage)` | ||
max-width: 100%; | ||
height: 75%; | ||
object-fit: contain; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Absolute imports should come before relative imports import/first