diff --git a/lib/colors.ts b/lib/colors.ts
index 2d4ca14cc..08f605e0e 100644
--- a/lib/colors.ts
+++ b/lib/colors.ts
@@ -1,4 +1,4 @@
-import { random } from 'lodash'
+import random from 'lodash.random'
 
 export function getRandomPairOfColors() {
   const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
diff --git a/package.json b/package.json
index 16277c1d6..1c16e52d6 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.random": "^3.2.0",
     "next": "^9.5.6-canary.4",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
@@ -56,6 +57,7 @@
     "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.random": "^3.2.6",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "graphql": "^15.3.0",
diff --git a/pages/search.tsx b/pages/search.tsx
index 391acf22e..be2b28ee2 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,15 +1,15 @@
 import cn from 'classnames'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import Link from 'next/link'
-import { range } from 'lodash'
 import { useRouter } from 'next/router'
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { Layout } from '@components/core'
 import { ProductCard } from '@components/product'
 import { Container, Grid, Skeleton } from '@components/ui'
-import getSlug from '@utils/get-slug'
 import useSearch from '@lib/bigcommerce/products/use-search'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+import rangeMap from '@lib/range-map'
+import getSlug from '@utils/get-slug'
 import {
   filterQuery,
   getCategoryPath,
@@ -151,8 +151,9 @@ export default function Search({
             </Grid>
           ) : (
             <Grid layout="normal">
-              {range(12).map(() => (
+              {rangeMap(12, (i) => (
                 <Skeleton
+                  key={i}
                   className="w-full animate__animated animate__fadeIn"
                   height={325}
                 />
diff --git a/yarn.lock b/yarn.lock
index a39341220..23ff17fe4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2206,6 +2206,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.random@^3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
+  integrity sha512-RRr0pKm+3USvG/HTkuRKA8v2EqXu19VXC09j4VL2UQec8Yx8Fn6wYTPGjYdmX4UFd23ykS7SLFkiULS/rv8kTA==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.161"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.161.tgz#a21ca0777dabc6e4f44f3d07f37b765f54188b18"
@@ -5511,6 +5518,11 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
+lodash.random@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.random/-/lodash.random-3.2.0.tgz#96e24e763333199130d2c9e2fd57f91703cc262d"
+  integrity sha1-luJOdjMzGZEw0sni/Vf5FwPMJi0=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"