Skip to content

Commit

Permalink
(PC-9075) Replace skeleton by new custom made on Home
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoinewg
antoinewg committed Jun 11, 2021
1 parent 329cbb3 commit 618b892
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 78 deletions.
71 changes: 71 additions & 0 deletions src/features/home/atoms/SkeletonTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { useEffect } from 'react'
import { Animated, Easing, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import styled from 'styled-components/native'

import { UniqueColors } from 'ui/theme'

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)

interface DimensionProps {
height: number
width: number
borderRadius: number
}

const useWaveAnimation = (width: number) => {
const animation = new Animated.Value(0)
const translateX = animation.interpolate({
inputRange: [0, 1],
outputRange: [-width * 1.25, width * 1.25],
})

useEffect(() => {
Animated.loop(
Animated.timing(animation, {
toValue: 1,
duration: 1200,
easing: Easing.linear,
useNativeDriver: false,
})
).start()
})

return translateX
}

const start = { x: 0, y: 0 }
const end = { x: 1, y: 0 }
const colors = [
UniqueColors.BACKGROUND_COLOR,
UniqueColors.FOREGROUND_COLOR,
UniqueColors.FOREGROUND_COLOR,
UniqueColors.BACKGROUND_COLOR,
]

export const SkeletonTile: React.FC<DimensionProps> = ({ width, height, borderRadius }) => {
const translateX = useWaveAnimation(width)

return (
<BackgroundContainer height={height} width={width} borderRadius={borderRadius}>
<AnimatedLinearGradient
start={start}
end={end}
colors={colors}
style={{
borderRadius,
...((StyleSheet.absoluteFill as unknown) as Record<string, unknown>),
transform: [{ translateX }],
}}
/>
</BackgroundContainer>
)
}

const BackgroundContainer = styled.View<DimensionProps>(({ height, width, borderRadius }) => ({
borderRadius,
height,
width,
overflow: 'hidden',
backgroundColor: UniqueColors.BACKGROUND_COLOR,
}))
122 changes: 44 additions & 78 deletions src/features/home/components/HomeBodyPlaceholder.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react'
import ContentLoader from 'react-content-loader/native'
import { View, Dimensions, PixelRatio } from 'react-native'
import { G, Rect } from 'react-native-svg'
import styled from 'styled-components/native'

import { SkeletonTile } from 'features/home/atoms/SkeletonTile'
import {
getSpacing,
LENGTH_L,
Expand All @@ -12,7 +11,6 @@ import {
RATIO_ALGOLIA,
RATIO_BUSINESS,
Spacer,
UniqueColors,
} from 'ui/theme'
import { BorderRadiusEnum } from 'ui/theme/grid'

Expand All @@ -22,8 +20,8 @@ enum TileSize {
}

export const HomeBodyPlaceholder = () => (
<React.Fragment>
<OfferModulePlaceholder size={LENGTH_L} numberOfTiles={4} />
<View>
<OfferModulePlaceholder size={LENGTH_L} numberOfTiles={2} />
<Spacer.Column numberOfSpaces={6} />
<OfferModulePlaceholder size={LENGTH_M} numberOfTiles={5} />
<Spacer.Column numberOfSpaces={6} />
Expand All @@ -34,100 +32,68 @@ export const HomeBodyPlaceholder = () => (
<OfferModulePlaceholder size={LENGTH_M} numberOfTiles={5} />
<Spacer.Column numberOfSpaces={6} />
<OfferModulePlaceholder size={LENGTH_L} numberOfTiles={4} />
</React.Fragment>
</View>
)

const OfferModulePlaceholder: React.FC<{ size: TileSize; numberOfTiles: number }> = ({
size,
numberOfTiles,
}) => {
return (
<Row>
<Spacer.Row numberOfSpaces={6} />
<View>
<ModuleTitlePlaceholder />
<Spacer.Column numberOfSpaces={4} />
<Row>
{new Array(numberOfTiles).fill(null).map((_, index) => (
<React.Fragment key={`placeholder-${index}`}>
<OfferTilePlaceholder size={size} />
<Spacer.Row numberOfSpaces={4} />
</React.Fragment>
))}
</Row>
</View>
</Row>
)
}
}) => (
<Row>
<Spacer.Row numberOfSpaces={6} />
<View>
<ModuleTitlePlaceholder />
<Spacer.Column numberOfSpaces={4} />
<Row>
{new Array(numberOfTiles).fill(null).map((_, index) => (
<React.Fragment key={`placeholder-${index}`}>
<OfferTilePlaceholder size={size} />
<Spacer.Row numberOfSpaces={4} />
</React.Fragment>
))}
</Row>
</View>
</Row>
)

const ModuleTitlePlaceholder = () => (
<ContentLoader
height={getSpacing(4)}
width={getSpacing(40)}
speed={1}
backgroundColor={UniqueColors.BACKGROUND_COLOR}
foregroundColor={UniqueColors.FOREGROUND_COLOR}>
<Rect rx={2} ry={2} width={getSpacing(40)} height={getSpacing(4)} />
</ContentLoader>
<SkeletonTile width={getSpacing(40)} height={getSpacing(4)} borderRadius={2} />
)

const OfferTilePlaceholder = ({ size }: { size: TileSize }) => {
const height = size + PixelRatio.roundToNearestPixel(MARGIN_DP)
const width = size * RATIO_ALGOLIA
return (
<ContentLoader
height={height + getSpacing(10)}
width={width}
speed={1}
backgroundColor={UniqueColors.BACKGROUND_COLOR}
foregroundColor={UniqueColors.FOREGROUND_COLOR}>
<G>
<BasePlaceholder height={height} width={width} />
</G>
<G y={height + getSpacing(2)}>
<TextPlaceholder width={0.8 * width} />
</G>
<G y={height + getSpacing(7)}>
<TextPlaceholder width={0.3 * width} />
</G>
</ContentLoader>
<View>
<BasePlaceholder height={height} width={width} />
<Spacer.Column numberOfSpaces={2} />
<TextPlaceholder width={0.8 * width} />
<Spacer.Column numberOfSpaces={2} />
<TextPlaceholder width={0.3 * width} />
<Spacer.Column numberOfSpaces={2} />
</View>
)
}

const BasePlaceholder = ({ height, width }: { height: number; width: number }) => (
<Rect
rx={BorderRadiusEnum.BORDER_RADIUS}
ry={BorderRadiusEnum.BORDER_RADIUS}
height={height}
width={width}
/>
<SkeletonTile borderRadius={BorderRadiusEnum.BORDER_RADIUS} height={height} width={width} />
)

const TextPlaceholder = ({ width, height }: { width: number; height?: number }) => (
<Rect rx={2} ry={2} height={height ?? getSpacing(3)} width={width} />
<SkeletonTile height={height ?? getSpacing(3)} width={width} borderRadius={2} />
)

const BusinessModulePlaceholder = () => {
const width = Dimensions.get('window').width - 2 * MARGIN_DP
const height = PixelRatio.roundToNearestPixel(width * RATIO_BUSINESS)
return (
<ContentLoader
height={height}
width={width}
speed={1}
backgroundColor={UniqueColors.BACKGROUND_COLOR}
foregroundColor={UniqueColors.FOREGROUND_COLOR}>
<Rect
rx={BorderRadiusEnum.BORDER_RADIUS}
ry={BorderRadiusEnum.BORDER_RADIUS}
width={width}
height={height}
/>
</ContentLoader>
)
}
const businessWidth = Dimensions.get('window').width - 2 * MARGIN_DP
const businessHeight = PixelRatio.roundToNearestPixel(businessWidth * RATIO_BUSINESS)
const BusinessModulePlaceholder = () => (
<SkeletonTile
height={businessHeight}
width={businessWidth}
borderRadius={BorderRadiusEnum.BORDER_RADIUS}
/>
)

const Row = styled.View({
flexDirection: 'row',
})
const Row = styled.View({ flexDirection: 'row' })

const CenterContainer = styled.View({
flex: 1,
Expand Down

0 comments on commit 618b892

Please sign in to comment.