Ott 704 photo preloader (#273)

src/features/Common/Image/index.tsx

@@ -1,5 +1,11 @@
 import type { BaseSyntheticEvent } from 'react'
-import { useCallback } from 'react'
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import styled from 'styled-components/macro'
 
@@ -10,6 +16,8 @@ type Props = {
   className?: string,
   dataSrc?: string,
   fallbackSrc?: string,
+  imagesList?: Array<RefObject<HTMLImageElement>>,
+  setImagesList?: (imagesList: Array<RefObject<HTMLImageElement>>) => void,
   src: string,
   title?: string,
 }
@@ -19,9 +27,23 @@ export const Image = ({
   className,
   dataSrc,
   fallbackSrc,
+  imagesList = [],
+  setImagesList,
   src,
   title,
 }: Props) => {
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(
+    () => {
+      if (!setImagesList || !loaded) return
+      setImagesList([...imagesList, imgRef])
+    },
+    // eslint-disable-next-line
+    [loaded],
+  )
+
   const onError = useCallback((e: BaseSyntheticEvent) => {
     // eslint-disable-next-line no-param-reassign
     e.target.onError = ''
@@ -36,6 +58,8 @@ export const Image = ({
       data-src={dataSrc}
       className={className}
       onError={onError}
+      onLoad={() => setLoaded(true)}
+      ref={imgRef}
       title={title}
     />
   )

src/features/MatchPopup/components/PlayersList/index.tsx

@@ -1,13 +1,22 @@
+import React, {
+  RefObject,
+  useEffect,
+  useState,
+} from 'react'
+
 import map from 'lodash/map'
+import size from 'lodash/size'
 
 import { ProfileTypes, SportTypes } from 'config'
 
 import { PlayerPlaylistOptions, PlayerPlaylistOption } from 'features/MatchPage/types'
 import { useMatchPopupStore } from 'features/MatchPopup/store'
+import { Loader } from 'features/Loader'
 
 import { Teams } from '../../types'
 import {
   List,
+  LoaderWrapper,
   Item,
   Logo,
   PlayerName,
@@ -28,19 +37,39 @@ export const PlayersList = ({
   team,
 }: Props) => {
   const { match } = useMatchPopupStore()
+  const [imagesList, setImagesList] = useState<
+  Array<RefObject<HTMLImageElement>>
+  >([])
+
+  const [allImagesReady, setAllImagesReady] = useState(false)
+
+  useEffect(() => {
+    if (size(imagesList) === size(players)) {
+      setAllImagesReady(true)
+    }
+  }, [imagesList, players])
+
   if (!match) return null
 
   return (
     <List team={team}>
+      {!allImagesReady
+        && (
+          <LoaderWrapper>
+            <Loader color='#515151' />
+          </LoaderWrapper>
+        )}
       {
         map(players, (player) => (
-          <Item key={player.id}>
+          <Item key={player.id} isReady={allImagesReady}>
             <Button onClick={() => onClick(player)}>
               <Logo
                 id={player.id}
                 sportType={sportType}
                 profileType={ProfileTypes.PLAYERS}
                 team={team}
+                imagesList={imagesList}
+                setImagesList={setImagesList}
               />
               <PlayerName nameObj={player} />
             </Button>

src/features/MatchPopup/components/PlayersList/styled.tsx

@@ -11,6 +11,18 @@ type ListProps = {
   team: Teams,
 }
 
+type ItemProps = {
+  isReady?: boolean,
+}
+
+export const LoaderWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 export const List = styled.ul<ListProps>`
   width: calc((100% - 30px) / 2);
   display: flex;
@@ -29,10 +41,16 @@ export const List = styled.ul<ListProps>`
   }
 `
 
-export const Item = styled.li`
+export const Item = styled.li<ItemProps>`
   width: 76px;
   height: 95px;
   margin: 10px;
+  transition: .3s;
+  opacity: ${({ isReady }) => (
+    isReady
+      ? '1'
+      : '0'
+  )};
 
   @media ${devices.mobile} {
     width: 100%;

src/features/ProfileLogo/index.tsx

@@ -1,3 +1,5 @@
+import { RefObject } from 'react'
+
 import { ProfileTypes, SportTypes } from 'config'
 import { getProfileFallbackLogo, getProfileLogo } from 'helpers'
 
@@ -10,10 +12,12 @@ type ProfileImageProps = {
   altNameObj?: ObjectWithName,
   className?: string,
   id: number,
+  imagesList?: Array<RefObject<HTMLImageElement>>,
   lazy?: boolean,
   nameAsTitle?: boolean,
   prefix?: string,
   profileType: ProfileTypes,
+  setImagesList?: (imagesList: Array<RefObject<HTMLImageElement>>) => void,
   size?: number,
   sportType: SportTypes,
   title?: string,
@@ -24,10 +28,12 @@ export const ProfileLogo = ({
   altNameObj,
   className,
   id,
+  imagesList,
   lazy = false,
   nameAsTitle,
   prefix,
   profileType,
+  setImagesList,
   size,
   sportType,
   title,
@@ -52,6 +58,8 @@ export const ProfileLogo = ({
       dataSrc={lazy ? src : ''}
       fallbackSrc={fallbackSrc}
       className={className}
+      imagesList={imagesList}
+      setImagesList={setImagesList}
       title={titleText}
     />
   )