Merge pull request #95 from hellomuthu23/fix-image-size

fix: lazy load images

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["lazyloading"]
+}

package.json

@@ -6,6 +6,7 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
+    "@types/react-lazy-load-image-component": "^1.6.4",
     "country-flag-icons": "^1.5.7",
     "firebase": "^8.3.2",
     "i18next": "^23.2.11",
@@ -14,6 +15,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^13.0.2",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "typescript": "4.1.5",

src/pages/AboutPage/AboutPage.tsx

@@ -8,6 +8,7 @@ import Benefits from './../../images/benefits.jpg';
 
 import '../HomePage/HomePage.css';
 import { GoogleAd } from '../../components/GoogleAd/GoogleAd';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export const AboutPage = () => {
   return (
@@ -30,16 +31,18 @@ export const AboutPlanningPokerContent = () => {
               <Typography variant='h5'>What is Agile Planning Poker?</Typography>
               <br />
               <Typography variant='body1'>
-                In Agile software development, accurate estimation of tasks is crucial for effective planning and
-                project success. Agile Planning Poker is a collaborative technique that leverages the wisdom of the team
-                to estimate effort, complexity, or relative size of user stories or tasks. In this article, we will
-                delve into the details of Agile Planning Poker, its benefits, and how it can revolutionize the
-                estimation process for Agile teams.
+                In Agile software development, accurate estimation of tasks is crucial for effective
+                planning and project success. Agile Planning Poker is a collaborative technique that
+                leverages the wisdom of the team to estimate effort, complexity, or relative size of
+                user stories or tasks. In this article, we will delve into the details of Agile
+                Planning Poker, its benefits, and how it can revolutionize the estimation process
+                for Agile teams.
                 <br></br>
-                Agile Planning Poker, also known as Scrum Poker, is a consensus-based estimation technique used in Agile
-                projects. It involves a team of individuals with diverse expertise collectively assigning effort points
-                or story points to user stories, features, or tasks. This technique facilitates discussion, knowledge
-                sharing, and alignment among team members, ensuring a more accurate estimation process.
+                Agile Planning Poker, also known as Scrum Poker, is a consensus-based estimation
+                technique used in Agile projects. It involves a team of individuals with diverse
+                expertise collectively assigning effort points or story points to user stories,
+                features, or tasks. This technique facilitates discussion, knowledge sharing, and
+                alignment among team members, ensuring a more accurate estimation process.
               </Typography>
             </div>
           </Slide>
@@ -48,7 +51,7 @@ export const AboutPlanningPokerContent = () => {
           <Slide in={true} direction='up' timeout={2000}>
             <div className='HomePageContainer'>
               <Box padding={2}>
-                <img alt='What' src={What}></img>
+                <LazyLoadImage alt='What' src={What}></LazyLoadImage>
               </Box>
             </div>
           </Slide>
@@ -61,7 +64,7 @@ export const AboutPlanningPokerContent = () => {
           <Slide in={true} direction='up' timeout={2000}>
             <div className='HomePageContainer'>
               <Box padding={2}>
-                <img alt='How' src={How}></img>
+                <LazyLoadImage alt='How' src={How}></LazyLoadImage>
               </Box>
             </div>
           </Slide>
@@ -72,27 +75,30 @@ export const AboutPlanningPokerContent = () => {
               <Typography variant='h5'>How Agile Planning Poker Works</Typography>
               <br />
               <Typography variant='body1'>
-                a. <b>Team Collaboration</b>: Agile Planning Poker brings together the entire Agile team, including
-                developers, testers, product owners, and scrum masters. Each team member receives a deck of cards with
-                values representing the effort or complexity of the work to be estimated.
+                a. <b>Team Collaboration</b>: Agile Planning Poker brings together the entire Agile
+                team, including developers, testers, product owners, and scrum masters. Each team
+                member receives a deck of cards with values representing the effort or complexity of
+                the work to be estimated.
                 <br />
-                b. <b>User Story Presentation</b>: The product owner presents a user story or task to the team,
-                explaining its purpose, requirements, and expected outcomes. This ensures a common understanding of the
-                work to be estimated.
+                b. <b>User Story Presentation</b>: The product owner presents a user story or task
+                to the team, explaining its purpose, requirements, and expected outcomes. This
+                ensures a common understanding of the work to be estimated.
                 <br />
-                c. <b>Individual Estimation</b>: Each team member privately selects a card representing their estimate
-                of effort or complexity. The cards are kept face down until everyone has made their estimation.
+                c. <b>Individual Estimation</b>: Each team member privately selects a card
+                representing their estimate of effort or complexity. The cards are kept face down
+                until everyone has made their estimation.
                 <br />
-                d. <b>Revealing Estimations</b>: On a predetermined signal, all team members simultaneously reveal their
-                selected cards. This reveals a range of estimates and encourages discussion and justification for the
-                differing estimations.
+                d. <b>Revealing Estimations</b>: On a predetermined signal, all team members
+                simultaneously reveal their selected cards. This reveals a range of estimates and
+                encourages discussion and justification for the differing estimations.
                 <br />
-                e. <b>Consensus Building</b>: Team members discuss their reasoning, clarifying any uncertainties and
-                sharing their perspectives. Through open dialogue, consensus is reached, and the team converges on a
-                shared estimation.
+                e. <b>Consensus Building</b>: Team members discuss their reasoning, clarifying any
+                uncertainties and sharing their perspectives. Through open dialogue, consensus is
+                reached, and the team converges on a shared estimation.
                 <br />
-                f. <b>Repeating the Process</b>: The Agile Planning Poker process is repeated for each user story or
-                task, allowing the team to estimate the entire backlog or sprint plan collaboratively.
+                f. <b>Repeating the Process</b>: The Agile Planning Poker process is repeated for
+                each user story or task, allowing the team to estimate the entire backlog or sprint
+                plan collaboratively.
               </Typography>
             </div>
           </Slide>
@@ -107,21 +113,25 @@ export const AboutPlanningPokerContent = () => {
               <Typography variant='h5'>Benefits of Agile Planning Poker</Typography>
               <br />
               <Typography variant='body1'>
-                a. <b>Improved Accuracy</b>: Agile Planning Poker leverages the collective knowledge and expertise of
-                the team, resulting in more accurate and reliable estimations. It considers different perspectives,
-                experiences, and skill sets, leading to a well-rounded estimation process.
+                a. <b>Improved Accuracy</b>: Agile Planning Poker leverages the collective knowledge
+                and expertise of the team, resulting in more accurate and reliable estimations. It
+                considers different perspectives, experiences, and skill sets, leading to a
+                well-rounded estimation process.
                 <br />
-                b. <b>Enhanced Collaboration</b>: The technique encourages open communication, discussion, and knowledge
-                sharing among team members. It facilitates a shared understanding of the work, promotes a sense of
-                ownership, and fosters a collaborative team culture.
+                b. <b>Enhanced Collaboration</b>: The technique encourages open communication,
+                discussion, and knowledge sharing among team members. It facilitates a shared
+                understanding of the work, promotes a sense of ownership, and fosters a
+                collaborative team culture.
                 <br />
-                c. <b>Increased Transparency</b>: Agile Planning Poker makes the estimation process transparent and
-                visible to the entire team. This visibility helps identify discrepancies, resolve conflicts, and align
-                expectations, ensuring better planning and decision-making.
+                c. <b>Increased Transparency</b>: Agile Planning Poker makes the estimation process
+                transparent and visible to the entire team. This visibility helps identify
+                discrepancies, resolve conflicts, and align expectations, ensuring better planning
+                and decision-making.
                 <br />
-                d. <b>Time Efficiency</b>: The structured nature of Agile Planning Poker streamlines the estimation
-                process. It prevents lengthy debates and reduces biases by anchoring individual estimations to a shared
-                understanding, leading to quicker consensus building.
+                d. <b>Time Efficiency</b>: The structured nature of Agile Planning Poker streamlines
+                the estimation process. It prevents lengthy debates and reduces biases by anchoring
+                individual estimations to a shared understanding, leading to quicker consensus
+                building.
               </Typography>
             </div>
           </Slide>
@@ -130,7 +140,7 @@ export const AboutPlanningPokerContent = () => {
           <Slide in={true} direction='up' timeout={2000}>
             <div className='HomePageContainer'>
               <Box padding={2}>
-                <img alt='Benefits' src={Benefits}></img>
+                <LazyLoadImage alt='Benefits' src={Benefits}></LazyLoadImage>
               </Box>
             </div>
           </Slide>
@@ -143,7 +153,7 @@ export const AboutPlanningPokerContent = () => {
           <Slide in={true} direction='up' timeout={2000}>
             <div className='HomePageContainer'>
               <Box padding={2}>
-                <img alt='BestPractices' src={BestPractices}></img>
+                <LazyLoadImage alt='BestPractices' src={BestPractices}></LazyLoadImage>
               </Box>
             </div>
           </Slide>
@@ -154,40 +164,44 @@ export const AboutPlanningPokerContent = () => {
               <Typography variant='h5'>Best Practices for Agile Planning Poker</Typography>
               <br />
               <Typography variant='body1'>
-                a. <b>Establish Consistent Estimation Units</b>: Ensure the team has a clear understanding and
-                consistency in the units used for estimation, such as story points, ideal days, or t-shirt sizes.
+                a. <b>Establish Consistent Estimation Units</b>: Ensure the team has a clear
+                understanding and consistency in the units used for estimation, such as story
+                points, ideal days, or t-shirt sizes.
                 <br />
-                b. <b>Include the Whole Team</b>: Involve all team members in Agile Planning Poker, as diverse
-                perspectives lead to better estimations and improved buy-in.
+                b. <b>Include the Whole Team</b>: Involve all team members in Agile Planning Poker,
+                as diverse perspectives lead to better estimations and improved buy-in.
                 <br />
-                c. <b>Use Fibonacci Sequence</b>: Consider utilizing the Fibonacci sequence (1, 2, 3, 5, 8, 13, 21,
-                etc.) for assigning values to estimation cards. This helps account for the inherent uncertainty and
-                diminishing accuracy of estimating larger tasks.
+                c. <b>Use Fibonacci Sequence</b>: Consider utilizing the Fibonacci sequence (1, 2,
+                3, 5, 8, 13, 21, etc.) for assigning values to estimation cards. This helps account
+                for the inherent uncertainty and diminishing accuracy of estimating larger tasks.
                 <br />
-                d. <b>Document and Track Estimations</b>: Maintain a record of estimated values to track progress,
-                monitor trends and identify areas where adjustments may be necessary. This documentation provides
-                valuable insights for future planning and retrospective analysis.
+                d. <b>Document and Track Estimations</b>: Maintain a record of estimated values to
+                track progress, monitor trends and identify areas where adjustments may be
+                necessary. This documentation provides valuable insights for future planning and
+                retrospective analysis.
                 <br />
-                e. <b>Embrace Consensus</b>: Agile Planning Poker aims to achieve consensus within the team. Encourage
-                open discussions, actively listen to different viewpoints, and work towards finding common ground to
-                reach agreement on the estimation.
+                e. <b>Embrace Consensus</b>: Agile Planning Poker aims to achieve consensus within
+                the team. Encourage open discussions, actively listen to different viewpoints, and
+                work towards finding common ground to reach agreement on the estimation.
                 <br />
-                f. <b>Iterate and Refine</b>: Agile Planning Poker is not a one-time activity. Continuously refine and
-                improve the estimation process based on feedback and lessons learned from previous sprints. Adapt the
-                technique to suit the team's needs and evolving project requirements.
+                f. <b>Iterate and Refine</b>: Agile Planning Poker is not a one-time activity.
+                Continuously refine and improve the estimation process based on feedback and lessons
+                learned from previous sprints. Adapt the technique to suit the team's needs and
+                evolving project requirements.
                 <br />
                 <br />
               </Typography>
             </div>
           </Slide>
         </Grid>
         <Typography>
-          Agile Planning Poker is a powerful technique that enhances collaboration, transparency, and accuracy in the
-          estimation process for Agile teams. By harnessing the collective knowledge and expertise of team members, it
-          leads to more reliable estimations and better planning outcomes. Embracing Agile Planning Poker enables teams
-          to effectively manage project scope, prioritize work, and deliver value to stakeholders with increased
-          confidence. Incorporate this collaborative estimation technique into your Agile practices and experience the
-          benefits of empowered teamwork and improved project success.
+          Agile Planning Poker is a powerful technique that enhances collaboration, transparency,
+          and accuracy in the estimation process for Agile teams. By harnessing the collective
+          knowledge and expertise of team members, it leads to more reliable estimations and better
+          planning outcomes. Embracing Agile Planning Poker enables teams to effectively manage
+          project scope, prioritize work, and deliver value to stakeholders with increased
+          confidence. Incorporate this collaborative estimation technique into your Agile practices
+          and experience the benefits of empowered teamwork and improved project success.
         </Typography>
       </Grid>
     </>

src/pages/HomePage/HomePage.tsx

@@ -11,6 +11,7 @@ import './HomePage.css';
 import { AboutPlanningPokerContent } from '../AboutPage/AboutPage';
 import { Footer } from '../../components/Footer/Footer';
 import { GoogleAd } from '../../components/GoogleAd/GoogleAd';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 export const HomePage = () => {
   const isJoin = useRouteMatch('/join');
@@ -25,11 +26,12 @@ export const HomePage = () => {
               <div className='HomePageContainer'>
                 <Typography variant='h5'>{t('HomePage.heroSection.title')}</Typography>
                 <Box padding={2}>
-                  <img
+                  <LazyLoadImage
+                    loading='lazy'
                     alt={t('HomePage.heroSection.title')}
                     className='HomePageImage'
                     src={LandingImage}
-                  ></img>
+                  ></LazyLoadImage>
                 </Box>
                 <Typography variant='subtitle1'>{t('HomePage.heroSection.description')}</Typography>
               </div>

yarn.lock

@@ -3271,6 +3271,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-lazy-load-image-component@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.4.tgz#b524656f3a468ca18740768075afbc51b4242412"
+  integrity sha512-8pFPeDPF4yVG4lU1/ixZidJEEDZmEOYOTYDvmIu2IAabyuv97Q7n/93nMCocHvQ7vD1czKGiW+op55D9m3MkdA==
+  dependencies:
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/react-router-dom@^5.1.7":
   version "5.1.7"
   resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz"
@@ -8098,6 +8106,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
@@ -9742,6 +9755,14 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lazy-load-image-component@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz#f262c2f163052d71011e282031fd60aafa6494ac"
+  integrity sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"