Added loading=lazy to images

• Added:
- loading=lazy to images

app/javascript/gabsocial/components/image.js

@@ -8,7 +8,7 @@ export default class Image extends React.PureComponent {
 
   static propTypes = {
     alt: PropTypes.string.isRequired,
-    src: PropTypes.string,
+    isLazy: PropTypes.string,
     className: PropTypes.string,
     width: PropTypes.oneOfType([
       PropTypes.string,
@@ -44,7 +44,7 @@ export default class Image extends React.PureComponent {
       fit,
       className,
       nullable,
-      lazy,
+      isLazy,
       imageRef,
       ...otherProps
     } = this.props
@@ -75,6 +75,7 @@ export default class Image extends React.PureComponent {
         ref={imageRef}
         src={src}
         onError={this.handleOnError}
+        loading={isLazy ? 'lazy' : undefined}
       />
     )
   }

app/javascript/gabsocial/components/media_gallery.js

@@ -185,6 +185,7 @@ class Item extends ImmutablePureComponent {
           style={{ borderRadius }}
         >
           <img
+            loading='lazy'
             src={previewUrl}
             srcSet={srcSet}
             sizes={sizes}

app/javascript/gabsocial/components/status_card.js

@@ -178,7 +178,7 @@ export default class StatusCard extends ImmutablePureComponent {
     // : todo : use <Image />
     let embed = ''
     const thumbnail = interactive ?
-      <img alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.posAbs, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
+      <img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.posAbs, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
       :
       (
         <ResponsiveClassesComponent
@@ -186,7 +186,7 @@ export default class StatusCard extends ImmutablePureComponent {
           classNamesSmall={[_s.default, _s.height260PX, _s.width100PC].join(' ')}
           classNamesXS={[_s.default, _s.height200PX, _s.width100PC].join(' ')}
         >
-          <img alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.width100PC, _s.height100PC].join(' ')} />
+          <img loading='lazy' alt={''} src={cardImg} className={[_s.default, _s.objectFitCover, _s.width100PC, _s.height100PC].join(' ')} />
         </ResponsiveClassesComponent>
       )