perf(webapp): add lazy loading to images and use anchor element

edenia · Nov 28, 2022 · 26268c4 · 26268c4
1 parent bc67cbf
commit 26268c4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 53 deletions.
diff --git a/webapp/src/components/Footer/index.js b/webapp/src/components/Footer/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { makeStyles } from '@mui/styles'
-import { List, ListItemText, ListItem, Link } from '@mui/material'
+import { List, ListItemText, ListItem } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
 import { generalConfig } from '../../config'
@@ -34,61 +34,54 @@ const Footer = () => {
       </div>
 
       <div className={classes.gridFooter}>
-        <div>
-          <div className={classes.midText}>{t('footer1')}</div>
-          <Link
-            className={classes.noUnderline}
-            href="https://edenia.com/"
-            onClick={() => handleLinkClick()}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <div className={classes.midFooter}>
-              <div>
-                {t('footer2')}
-              </div>
-              <div>
-                  <img
-                    alt="antelope tools dashboard"
-                    src={'/edenia.png'}
-                    className={classes.imgHeaderLogo}
-                  />
-                </div>
-            </div>
-          </Link>
-        </div>
+        <div className={classes.midText}>{t('footer1')}</div>
+        <a
+          className={classes.noUnderline}
+          href="https://edenia.com/"
+          onClick={() => handleLinkClick()}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div className={classes.midFooter}>
+            {t('footer2')}
+            <img
+              alt="antelope tools dashboard"
+              src={'/edenia.png'}
+              className={classes.imgHeaderLogo}
+              loading="lazy"
+            />
+          </div>
+        </a>
       </div>
 
       <div className={classes.footerAlign}>
         <div className={classes.sidebarFooter}>
-          <Link
+          <a
             className={classes.noUnderline}
             href="https://github.com/edenia/antelope-tools/releases"
             onClick={() => handleLinkClick()}
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
           >
             <div className={classes.linkBadge}>
               {generalConfig.appVersion.split('-').pop()}
             </div>
-          </Link>
+          </a>
         </div>
 
-        <div>
-          <List
-            className={`${classes.footerMenuWrapper} ${classes.sidebarFooter}`}
+        <List
+          className={`${classes.footerMenuWrapper} ${classes.sidebarFooter}`}
+        >
+          <a
+            className={classes.noUnderline}
+            href="https://github.com/edenia/antelope-tools/issues/new/choose"
+            onClick={() => handleLinkClick()}
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <Link
-              className={classes.noUnderline}
-              href="https://github.com/edenia/antelope-tools/issues/new/choose"
-              onClick={() => handleLinkClick()}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t('bugRequest')}
-            </Link>
-          </List>
-        </div>
+            {t('bugRequest')}
+          </a>
+        </List>
       </div>
     </div>
   )

diff --git a/webapp/src/components/Footer/styles.js b/webapp/src/components/Footer/styles.js
@@ -73,6 +73,7 @@ export default (theme) => ({
   },
   gridFooter: {
     display: 'flex',
+    flexDirection: 'column',
     [theme.breakpoints.down('md')]: {
       order: 3,
       paddingBottom: '15px',

diff --git a/webapp/src/components/Header/index.js b/webapp/src/components/Header/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@mui/styles'
-import { Hidden, Menu, MenuItem, AppBar, IconButton, Link } from '@mui/material'
+import { Hidden, Menu, MenuItem, AppBar, IconButton } from '@mui/material'
 import Button from '@mui/material/Button'
 import Toolbar from '@mui/material/Toolbar'
 import MenuIcon from '@mui/icons-material/Menu'
@@ -29,15 +29,15 @@ const languages = [
 const HeaderLogo = () => {
   const classes = useStyles()
   return (
-    <div>
-      <Link href="https://antelope.tools/">
-        <img
-          alt="antelope tools dashboard"
-          src={'/antelope-tools.svg'}
-          className={classes.imgHeaderLogo}
-        />
-      </Link>
-    </div>
+    <a href="https://antelope.tools/" rel="external">
+      <img
+        alt="antelope tools dashboard"
+        src={'/antelope-tools.svg'}
+        width={145}
+        height={64}
+        className={classes.imgHeaderLogo}
+      />
+    </a>
   )
 }
 
@@ -66,7 +66,7 @@ const LanguageMenu = () => {
   }, [i18n.language])
 
   return (
-    <div>
+    <>
       <Button
         startIcon={<LanguageIcon />}
         onClick={toggleMenu}
@@ -89,7 +89,7 @@ const LanguageMenu = () => {
           </MenuItem>
         ))}
       </Menu>
-    </div>
+    </>
   )
 }
 

diff --git a/webapp/src/components/NetworkSelector/styles.js b/webapp/src/components/NetworkSelector/styles.js
@@ -129,6 +129,7 @@ export default (theme) => ({
     position: 'absolute',
     right: 70,
     top: -45,
+    cursor: 'default',
     backgroundColor: theme.palette.common.white,
     [theme.breakpoints.up('sm')]: {
       right: 0,