From 9e0b4cac920bab7a8e17c0c869e863e1ce6eee97 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

---
 .../__snapshots__/Favorites.test.tsx.snap     | 3255 ++++++++++++++++-
 .../search/components/Placeholders.tsx        |   68 +-
 2 files changed, 3269 insertions(+), 54 deletions(-)

diff --git a/src/features/favorites/pages/__tests__/__snapshots__/Favorites.test.tsx.snap b/src/features/favorites/pages/__tests__/__snapshots__/Favorites.test.tsx.snap
index acd70e49a51..843a5b1869e 100644
--- a/src/features/favorites/pages/__tests__/__snapshots__/Favorites.test.tsx.snap
+++ b/src/features/favorites/pages/__tests__/__snapshots__/Favorites.test.tsx.snap
@@ -198,6 +198,61 @@ exports[`Favorites component should render correctly 1`] = `
                 ]
               }
             />
+            <View
+              borderRadius={2}
+              height={12}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#DDDDDD",
+                    "borderRadius": 2,
+                    "height": 12,
+                    "overflow": "hidden",
+                    "width": 80,
+                  },
+                ]
+              }
+              width={80}
+            >
+              <BVLinearGradient
+                colors={
+                  Array [
+                    4292730333,
+                    4293848814,
+                    4293848814,
+                    4292730333,
+                  ]
+                }
+                endPoint={
+                  Object {
+                    "x": 1,
+                    "y": 0,
+                  }
+                }
+                locations={null}
+                startPoint={
+                  Object {
+                    "x": 0,
+                    "y": 0,
+                  }
+                }
+                style={
+                  Object {
+                    "borderRadius": 2,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                    "transform": Array [
+                      Object {
+                        "translateX": -100,
+                      },
+                    ],
+                  }
+                }
+              />
+            </View>
             <View
               numberOfSpaces={5}
               style={
@@ -232,7 +287,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -275,7 +648,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -318,7 +1009,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -361,7 +1370,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -404,7 +1731,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -447,7 +2092,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -490,7 +2453,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -533,7 +2814,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -576,7 +3175,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
@@ -619,7 +3536,325 @@ exports[`Favorites component should render correctly 1`] = `
                   },
                 ]
               }
-            />
+            >
+              <View
+                borderRadius={4}
+                height={96}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "#DDDDDD",
+                      "borderRadius": 4,
+                      "height": 96,
+                      "overflow": "hidden",
+                      "width": 64,
+                    },
+                  ]
+                }
+                width={64}
+              >
+                <BVLinearGradient
+                  colors={
+                    Array [
+                      4292730333,
+                      4293848814,
+                      4293848814,
+                      4292730333,
+                    ]
+                  }
+                  endPoint={
+                    Object {
+                      "x": 1,
+                      "y": 0,
+                    }
+                  }
+                  locations={null}
+                  startPoint={
+                    Object {
+                      "x": 0,
+                      "y": 0,
+                    }
+                  }
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "transform": Array [
+                        Object {
+                          "translateX": -80,
+                        },
+                      ],
+                    }
+                  }
+                />
+              </View>
+              <View
+                numberOfSpaces={4}
+                style={
+                  Array [
+                    Object {
+                      "width": 16,
+                    },
+                  ]
+                }
+              />
+              <View>
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 240,
+                      },
+                    ]
+                  }
+                  width={240}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -300,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={3}
+                  style={
+                    Array [
+                      Object {
+                        "height": 12,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 120,
+                      },
+                    ]
+                  }
+                  width={120}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -150,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={1}
+                  style={
+                    Array [
+                      Object {
+                        "height": 4,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 160,
+                      },
+                    ]
+                  }
+                  width={160}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -200,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+                <View
+                  numberOfSpaces={2}
+                  style={
+                    Array [
+                      Object {
+                        "height": 8,
+                      },
+                    ]
+                  }
+                />
+                <View
+                  borderRadius={2}
+                  height={12}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#DDDDDD",
+                        "borderRadius": 2,
+                        "height": 12,
+                        "overflow": "hidden",
+                        "width": 32,
+                      },
+                    ]
+                  }
+                  width={32}
+                >
+                  <BVLinearGradient
+                    colors={
+                      Array [
+                        4292730333,
+                        4293848814,
+                        4293848814,
+                        4292730333,
+                      ]
+                    }
+                    endPoint={
+                      Object {
+                        "x": 1,
+                        "y": 0,
+                      }
+                    }
+                    locations={null}
+                    startPoint={
+                      Object {
+                        "x": 0,
+                        "y": 0,
+                      }
+                    }
+                    style={
+                      Object {
+                        "borderRadius": 2,
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                        "transform": Array [
+                          Object {
+                            "translateX": -40,
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
           </View>
           <View
             highlighted={false}
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' })