Merge develop to main

src/components/Fireflies/index.ts

@@ -1,2 +1,2 @@
-export * from './Fireflies.component';
+export * from './Fireflies.component'
 export * as FirefliesStyles from './Fireflies.styles'

src/components/Loading/Loading.component.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactElement } from 'react'
+import * as S from './Loading.styles'
+
+export const Loading: FC = (): ReactElement => {
+	return (
+		<S.Container>
+			<S.Loading />
+			<S.invLoading />
+		</S.Container>
+	)
+}

src/components/Loading/Loading.styles.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+import { BoxStyles } from 'styles'
+
+export const Container = styled.div`
+  position: relative;
+  ${BoxStyles.CenterFlex}
+  width: 100%;
+  height: 100%;
+`
+
+export const Loading = styled.div`
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  border: 4px solid;
+  border-radius: 100%;
+  border-color: #fff0 #af1155 #af1155 #af1155;
+  animation: loading 0.5s ease infinite;
+`
+
+export const invLoading = styled.div`
+  position: absolute;
+  height: 35px;
+  width: 35px;
+  border: 4px solid;
+  border-radius: 100%;
+  border-color: #fff0 #888 #888 #888;
+  animation: invLoading 0.5s ease infinite;
+`

src/components/Loading/index.ts

@@ -0,0 +1,2 @@
+export * from './Loading.component'
+export * as LoadingStyles from './Loading.styles'

src/components/SubRanking/SubRanking.component.tsx

@@ -2,6 +2,7 @@ import * as S from './SubRanking.styles'
 import { Trophy, TrophyStyles } from 'components/Trophy'
 import { FC, ReactElement, useCallback, useMemo } from 'react'
 import { Separator } from 'styles'
+import { Loading } from 'components/Loading'
 
 export interface SubRankingUser {
 	name: string
@@ -12,11 +13,12 @@ export interface SubRankingUser {
 export interface SubRankingProps {
 	title: string
 	ranking: SubRankingUser[]
+	isLoaded: boolean
 }
 
 const places: TrophyStyles.TrophyPlaces[] = ['first', 'second', 'third']
 
-export const SubRanking: FC<SubRankingProps> = ({ title, ranking }): ReactElement => {
+export const SubRanking: FC<SubRankingProps> = ({ title, ranking, isLoaded }): ReactElement => {
 	const cutRanking = useMemo(() => ranking.slice(0, 3), [ranking])
 
 	const renderRanking = useCallback(
@@ -36,18 +38,20 @@ export const SubRanking: FC<SubRankingProps> = ({ title, ranking }): ReactElemen
 	return (
 		<S.SubRanking>
 			<S.SubRankingContent>
-				<S.SubRankingSection>
-					<S.SubRankingTitle>{title}</S.SubRankingTitle>
-					<Separator />
-					<S.SubRankingList>{cutRanking.map(renderRanking)}</S.SubRankingList>
-				</S.SubRankingSection>
-				<S.SubRankingSection centered>
-					<S.SubRankingImage
-						// TODO - add winner image
-						src='https://static-cdn.jtvnw.net/jtv_user_pictures/e600242f-ca1d-4941-85f2-8849c125dd6e-profile_image-70x70.png'
-						alt='winner'
-					/>
-				</S.SubRankingSection>
+        {isLoaded ? <>
+          <S.SubRankingSection>
+            <S.SubRankingTitle>{title}</S.SubRankingTitle>
+            <Separator />
+            <S.SubRankingList>{cutRanking.map(renderRanking)}</S.SubRankingList>
+          </S.SubRankingSection>
+          <S.SubRankingSection centered>
+              <S.SubRankingImage
+                // TODO - add winner image
+                src='https://static-cdn.jtvnw.net/jtv_user_pictures/e600242f-ca1d-4941-85f2-8849c125dd6e-profile_image-70x70.png'
+                alt='winner'
+              />
+          </S.SubRankingSection>
+        </> : <Loading />}
 			</S.SubRankingContent>
 		</S.SubRanking>
 	)

src/hooks/useRanking.ts

@@ -6,25 +6,28 @@ import { RankingTypes } from 'types/ranking.types'
 
 export interface UseRanking {
 	ranking: RankingTypes.User[]
+	isRankingLoaded: boolean
 }
 
 export const useRanking = (dbRef: FirebaseTypes.DatabaseRef): UseRanking => {
 	const [ranking, setRanking] = useState<RankingTypes.User[]>([])
+	const [isRankingLoaded, setIsRankingLoaded] = useState<boolean>(false)
 
 	const getRanking = useCallback(() => {
 		const usersRankingRef = ref(FirebaseConfig.database, dbRef)
 		const unsubscribe = onValue(usersRankingRef, (snapshot) => {
 			const data = snapshot.val() as FirebaseTypes.UserRanking
 			const users = Object.entries(data).map(([key, value]) => ({ name: key, ...value }))
+			if (!isRankingLoaded) setIsRankingLoaded(true)
 			setRanking(users)
 		})
 
 		return () => {
 			unsubscribe()
 		}
-	}, [dbRef])
+	}, [dbRef, isRankingLoaded])
 
 	useEffect(getRanking, [])
 
-	return { ranking }
+	return { ranking, isRankingLoaded }
 }

src/index.css

@@ -14,4 +14,14 @@
   100% {
     top: 105vh;
   }
+}
+
+@keyframes loading {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes invLoading {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(-360deg); }
 }

src/pages/Home/Home.page.tsx

@@ -9,7 +9,7 @@ import { FC, Fragment, ReactElement, useMemo, useState } from 'react'
 import { transformRanking } from 'utils'
 
 export const Home: FC = (): ReactElement => {
-	const { ranking: channelRanking } = useRanking('channels')
+	const { ranking: channelRanking, isRankingLoaded: isChannelLoaded } = useRanking('channels')
 	const { ranking: monthlyRanking } = useRanking('monthly')
 	const { ranking: weeklyRanking } = useRanking('weekly')
 	const [rankingType, setRankingType] = useState<HomeContextModule.RankingType>('jolines')
@@ -23,9 +23,21 @@ export const Home: FC = (): ReactElement => {
 				<S.RankingSection>
 					<UsersRanking />
 					<S.SubRankingSection>
-						<SubRanking title='Ranking por canales' ranking={transformSubRanking(channelRanking)} />
-						<SubRanking title='Ranking mensual' ranking={transformSubRanking(monthlyRanking)} />
-						<SubRanking title='Ranking semanal' ranking={transformSubRanking(weeklyRanking)} />
+						<SubRanking
+							title='Ranking por canales'
+							ranking={transformSubRanking(channelRanking)}
+							isLoaded={isChannelLoaded}
+						/>
+						<SubRanking
+							title='Ranking mensual'
+							ranking={transformSubRanking(monthlyRanking)}
+							isLoaded={isChannelLoaded}
+						/>
+						<SubRanking
+							title='Ranking semanal'
+							ranking={transformSubRanking(weeklyRanking)}
+							isLoaded={isChannelLoaded}
+						/>
 					</S.SubRankingSection>
 				</S.RankingSection>
 			</HomeContextModule.HomeContext.Provider>