Merge pull request #3271 from SailingSteve/steveWebAppFeb13-4pm

Back ported LazyImage.jsx from Campaign
wevote · Feb 14, 2021 · 192e8a4 · 192e8a4
2 parents c8417a0 + 48eb959
commit 192e8a4
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 12 deletions.
diff --git a/src/js/components/Navigation/HeaderBackTo.jsx b/src/js/components/Navigation/HeaderBackTo.jsx
@@ -4,10 +4,12 @@ import styled from 'styled-components';
 import { AccountCircle } from '@material-ui/icons';
 import { AppBar, IconButton, Toolbar, Button } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
 import AppStore from '../../stores/AppStore';
 import AppActions from '../../actions/AppActions';
 import { dumpCssFromId } from '../../utils/appleSiliconUtils';
 import { hasIPhoneNotch, historyPush, isIOSAppOnMac, isCordova, isWebApp, isIPad } from '../../utils/cordovaUtils';
+import LazyImage from '../../utils/LazyImage';
 import HeaderBackToButton from './HeaderBackToButton';
 import HeaderBarProfilePopUp from './HeaderBarProfilePopUp';
 import HeaderNotificationMenu from './HeaderNotificationMenu';
@@ -255,9 +257,10 @@ class HeaderBackTo extends Component {
                       className={`header-nav__avatar-container ${isCordova() ? 'header-nav__avatar-cordova' : undefined}`}
                       onClick={this.toggleProfilePopUp}
                     >
-                      <img
+                      <LazyImage
                         className="header-nav__avatar"
                         src={voterPhotoUrlMedium}
+                        placeholder={anonymous}
                         height={34}
                         width={34}
                         alt="Your Settings"

diff --git a/src/js/components/Navigation/HeaderBackToBallot.jsx b/src/js/components/Navigation/HeaderBackToBallot.jsx
@@ -4,11 +4,13 @@ import styled from 'styled-components';
 import { AccountCircle } from '@material-ui/icons';
 import { Button, AppBar, IconButton, Toolbar } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
 import AppActions from '../../actions/AppActions';
 import AppStore from '../../stores/AppStore';
 import { dumpCssFromId } from '../../utils/appleSiliconUtils';
 import CandidateStore from '../../stores/CandidateStore';
 import { hasIPhoneNotch, historyPush, isAndroid, isIOSAppOnMac, isCordova, isIPad, isWebApp } from '../../utils/cordovaUtils';
+import LazyImage from '../../utils/LazyImage';
 import HeaderBackToButton from './HeaderBackToButton';
 import HeaderBarProfilePopUp from './HeaderBarProfilePopUp';
 import HeaderNotificationMenu from './HeaderNotificationMenu';
@@ -731,9 +733,10 @@ class HeaderBackToBallot extends Component {
                     className={`header-nav__avatar-container ${isCordova() ? 'header-nav__avatar-cordova' : undefined}`}
                     onClick={this.toggleProfilePopUp}
                   >
-                    <img
+                    <LazyImage
                       className="header-nav__avatar"
                       src={voterPhotoUrlMedium}
+                      placeholder={anonymous}
                       style={{
                         marginLeft: 16,
                       }}

diff --git a/src/js/components/Navigation/HeaderBackToVoterGuides.jsx b/src/js/components/Navigation/HeaderBackToVoterGuides.jsx
@@ -4,10 +4,12 @@ import styled from 'styled-components';
 import { withStyles } from '@material-ui/core/styles';
 import { Button, AppBar, Toolbar, Tooltip, IconButton } from '@material-ui/core';
 import { Place, AccountCircle } from '@material-ui/icons';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
 import AppStore from '../../stores/AppStore';
 import AppActions from '../../actions/AppActions';
 import BallotStore from '../../stores/BallotStore';
 import { isCordova, isWebApp, historyPush, hasIPhoneNotch } from '../../utils/cordovaUtils';
+import LazyImage from '../../utils/LazyImage';
 import EndorsementModeTabs from './EndorsementModeTabs';
 import HeaderBackToButton from './HeaderBackToButton';
 import HeaderBarProfilePopUp from './HeaderBarProfilePopUp';
@@ -333,9 +335,10 @@ class HeaderBackToVoterGuides extends Component {
                     className={`header-nav__avatar-container ${isCordova() ? 'header-nav__avatar-cordova' : undefined}`}
                     onClick={this.toggleProfilePopUp}
                   >
-                    <img
+                    <LazyImage
                       className="header-nav__avatar"
                       src={voterPhotoUrlMedium}
+                      placeholder={anonymous}
                       style={{
                         marginLeft: 16,
                       }}

diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx
@@ -4,7 +4,9 @@ import styled from 'styled-components';
 import { Button, AppBar, Toolbar, Tabs, IconButton, Tooltip } from '@material-ui/core';
 import { Place, AccountCircle } from '@material-ui/icons';
 import { withStyles } from '@material-ui/core/styles';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
 import { hasIPhoneNotch, historyPush, isIOSAppOnMac, isCordova, isWebApp } from '../../utils/cordovaUtils';
+import LazyImage from '../../utils/LazyImage';
 import AdviserIntroModal from '../CompleteYourProfile/AdviserIntroModal';
 import AppActions from '../../actions/AppActions';
 import AppStore from '../../stores/AppStore';
@@ -550,9 +552,10 @@ class HeaderBar extends Component {
                     style={isCordova() ? { marginBottom: 2 } : {}}
                     onClick={this.toggleProfilePopUp}
                   >
-                    <img
+                    <LazyImage
                       className="header-nav__avatar"
                       src={voterPhotoUrlMedium}
+                      placeholder={anonymous}
                       style={{
                         marginLeft: 16,
                       }}

diff --git a/src/js/components/Navigation/WelcomeAppbar.jsx b/src/js/components/Navigation/WelcomeAppbar.jsx
@@ -22,6 +22,10 @@ import VoterGuideActions from '../../actions/VoterGuideActions';
 import VoterStore from '../../stores/VoterStore';
 import VoterSessionActions from '../../actions/VoterSessionActions';
 import { voterPhoto } from '../../utils/voterPhoto';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
+import LazyImage from '../../utils/LazyImage';
+
+
 
 class WelcomeAppbar extends Component {
   constructor (props) {
@@ -302,9 +306,10 @@ class WelcomeAppbar extends Component {
                       className="header-nav__avatar-container"
                       onClick={this.toggleProfilePopUp}
                     >
-                      <img
+                      <LazyImage
                         className="header-nav__avatar"
                         src={voterPhotoUrlMedium}
+                        placeholder={anonymous}
                         height={34}
                         width={34}
                         alt="generic avatar"
@@ -348,9 +353,10 @@ class WelcomeAppbar extends Component {
                       id="profileAvatarHeaderBar"
                       onClick={this.toggleProfilePopUp}
                     >
-                      <img
+                      <LazyImage
                         className="header-nav__avatar"
                         src={voterPhotoUrlMedium}
+                        placeholder={anonymous}
                         height={24}
                         width={24}
                         alt="generic avatar"

diff --git a/src/js/routes/Settings/HamburgerMenu.jsx b/src/js/routes/Settings/HamburgerMenu.jsx
@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
+import Table from 'react-bootstrap/Table';
 import Helmet from 'react-helmet';
 import { Link } from 'react-router-dom';
-import Table from 'react-bootstrap/Table';
-import { cordovaDot, isCordova, isWebApp } from '../../utils/cordovaUtils';
+import anonymous from '../../../img/global/icons/avatar-generic.png';
+import avatarGeneric from '../../../img/global/svg-icons/avatar-generic.svg';
+import LoadingWheel from '../../components/LoadingWheel';
+import HamburgerMenuRow from '../../components/Navigation/HamburgerMenuRow';
 import DeviceDialog from '../../components/Widgets/DeviceDialog';
 import VoterStore from '../../stores/VoterStore';
-import HamburgerMenuRow from '../../components/Navigation/HamburgerMenuRow';
-import LoadingWheel from '../../components/LoadingWheel';
+import { cordovaDot, isCordova, isWebApp } from '../../utils/cordovaUtils';
+import LazyImage from '../../utils/LazyImage';
 import { renderLog } from '../../utils/logging';
-import avatarGeneric from '../../../img/global/svg-icons/avatar-generic.svg';
 import { voterPhoto } from '../../utils/voterPhoto';
 
 const webAppConfig = require('../../config');
@@ -65,9 +67,10 @@ export default class HamburgerMenu extends Component {
       >
         {voterPhotoUrlMedium ? (
           <div className={isWebApp() ? 'header-nav__avatar' : 'header-nav__avatar-cordova header-nav__cordova'}>
-            <img
+            <LazyImage
               alt="Signed in voter"
               src={voterPhotoUrlMedium}
+              placeholder={anonymous}
               height={34}
               width={34}
               style={{ maxWidth: 'unset' }}

diff --git a/src/js/utils/LazyImage.jsx b/src/js/utils/LazyImage.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class LazyImage extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      src: null,
+    };
+  }
+
+  componentDidMount () {
+    const { src } = this.props;
+    console.log('LazyImage componentDidMount props:', this.props);
+
+    const imageLoader = new Image();
+    imageLoader.src = src;
+
+    imageLoader.onload = () => {
+      console.log('LazyImage loaded src:', src);
+      this.setState({ src });
+    };
+  }
+
+  render () {
+    const { placeholder, className, height, width, alt } = this.props;
+    const { src } = this.state;
+    return (
+      <img src={src || placeholder} className={className} height={height} width={width} alt={alt} />
+    );
+  }
+}
+
+LazyImage.propTypes = {
+  src: PropTypes.string,
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  alt: PropTypes.string,
+};