From a3f29af5d73951e618cde3f7a3f795bda1e7cdbe Mon Sep 17 00:00:00 2001
From: Antoine Garcia <antoine.garcia@polyconseil.fr>
Date: Fri, 11 Jun 2021 12:43:10 +0200
Subject: [PATCH] (PC-9075) Replace skeleton by new custom made on Search page

---
 .../search/components/Placeholders.tsx        | 68 +++++++------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/src/features/search/components/Placeholders.tsx b/src/features/search/components/Placeholders.tsx
index 09582dfcc9e..40d287599c0 100644
--- a/src/features/search/components/Placeholders.tsx
+++ b/src/features/search/components/Placeholders.tsx
@@ -1,68 +1,48 @@
 import React from 'react'
-import ContentLoader from 'react-content-loader/native'
-import { Dimensions } from 'react-native'
-import { G, Rect } from 'react-native-svg'
+import { View } from 'react-native'
 import styled from 'styled-components/native'
 
-import { getSpacing, Spacer, UniqueColors } from 'ui/theme'
+import { SkeletonTile } from 'features/home/atoms/SkeletonTile'
+import { getSpacing, Spacer } from 'ui/theme'
 
 const borderRadius = 4
 
-const { width: windowWidth } = Dimensions.get('window')
 const imageWidth = getSpacing(16)
 const imageHeight = getSpacing(24) // ratio 2/3
 
 const BasePlaceholder = ({ height, width }: { height: number; width: number }) => (
-  <Rect rx={borderRadius} ry={borderRadius} height={height} width={width} />
+  <SkeletonTile borderRadius={borderRadius} height={height} width={width} />
 )
+
 const TextPlaceholder = ({ width, height }: { width: number; height?: number }) => (
-  <Rect rx={2} ry={2} height={height ?? getSpacing(3)} width={width} />
+  <SkeletonTile borderRadius={2} height={height ?? getSpacing(3)} width={width} />
 )
 
 export const NumberOfResultsPlaceholder = () => (
   <Container>
     <Spacer.Column numberOfSpaces={7} />
-    <ContentLoader
-      height={getSpacing(3)}
-      width={getSpacing(20)}
-      speed={1}
-      backgroundColor={UniqueColors.BACKGROUND_COLOR}
-      foregroundColor={UniqueColors.FOREGROUND_COLOR}>
-      <Rect rx={2} ry={2} width={getSpacing(20)} height={getSpacing(3)} />
-    </ContentLoader>
+    <SkeletonTile width={getSpacing(20)} height={getSpacing(3)} borderRadius={2} />
     <Spacer.Column numberOfSpaces={5} />
   </Container>
 )
 
-export const HitPlaceholder = () => {
-  const x = imageWidth + getSpacing(4)
-  return (
-    <Container>
-      <Row>
-        <ContentLoader
-          height={imageHeight}
-          width={windowWidth}
-          speed={1}
-          backgroundColor={UniqueColors.BACKGROUND_COLOR}
-          foregroundColor={UniqueColors.FOREGROUND_COLOR}>
-          <BasePlaceholder height={imageHeight} width={imageWidth} />
-          <G x={x} y={getSpacing(2)}>
-            <TextPlaceholder width={getSpacing(60)} />
-          </G>
-          <G x={x} y={getSpacing(8)}>
-            <TextPlaceholder width={getSpacing(30)} />
-          </G>
-          <G x={x} y={getSpacing(13)}>
-            <TextPlaceholder width={getSpacing(40)} />
-          </G>
-          <G x={x} y={getSpacing(19)}>
-            <TextPlaceholder width={getSpacing(8)} />
-          </G>
-        </ContentLoader>
-      </Row>
-    </Container>
-  )
-}
+export const HitPlaceholder = () => (
+  <Container>
+    <Row>
+      <BasePlaceholder height={imageHeight} width={imageWidth} />
+      <Spacer.Row numberOfSpaces={4} />
+      <View>
+        <TextPlaceholder width={getSpacing(60)} />
+        <Spacer.Column numberOfSpaces={3} />
+        <TextPlaceholder width={getSpacing(30)} />
+        <Spacer.Column numberOfSpaces={1} />
+        <TextPlaceholder width={getSpacing(40)} />
+        <Spacer.Column numberOfSpaces={2} />
+        <TextPlaceholder width={getSpacing(8)} />
+      </View>
+    </Row>
+  </Container>
+)
 
 const Container = styled.View({ marginHorizontal: getSpacing(6) })
 const Row = styled.View({ flexDirection: 'row', alignItems: 'center' })