Adding Search Skeleton

components/ui/Skeleton/Skeleton.module.css

@@ -1,25 +1,14 @@
 .skeleton {
-  @apply block rounded-md;
+  @apply block rounded;
-
+  background-image: linear-gradient(
-  &.loaded {
+    270deg,
-    width: unset !important;
+    var(--accents-1),
-  }
+    var(--accents-2),
-
+    var(--accents-2),
-  &:not(.wrapper):not(.show) {
+    var(--accents-1)
-    display: none;
+  );
-  }
+  background-size: 400% 100%;
-
+  animation: loading 8s ease-in-out infinite;
-  &::not(.wrapper):not(.loaded) {
-    background-image: linear-gradient(
-      270deg,
-      var(--accents-1),
-      var(--accents-2),
-      var(--accents-2),
-      var(--accents-1)
-    );
-    background-size: 400% 100%;
-    animation: loading 8s ease-in-out infinite;
-  }
 }
 
 .wrapper {

components/ui/_BLANK/Featurebar.tsx

@@ -1,15 +0,0 @@
-import cn from 'classnames'
-import { FC } from 'react'
-import s from './Featurebar.module.css'
-
-interface Props {
-  className?: string
-  children?: any
-}
-
-const Featurebar: FC<Props> = ({ children, className }) => {
-  const rootClassName = cn(s.root, className)
-  return <div className={rootClassName}>{children}</div>
-}
-
-export default Featurebar

components/ui/_BLANK/index.ts

@@ -1 +0,0 @@
-export { default } from './Featurebar'

package.json

@@ -23,6 +23,7 @@
     "@tailwindcss/ui": "^0.6.2",
     "@types/classnames": "^2.2.10",
     "@types/react-swipeable-views": "^0.13.0",
+    "animate.css": "^4.1.1",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",

pages/_app.tsx

@@ -1,11 +1,12 @@
+import '@assets/global.css'
+import '@assets/tailwind.css'
+import '@assets/utils.css'
+import 'animate.css'
 import { FC } from 'react'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 import { SSRProvider, OverlayProvider } from 'react-aria'
-import '@assets/global.css'
-import '@assets/tailwind.css'
-import '@assets/utils.css'
 import config from '../config.json'
 import Head from 'next/head'
 

pages/search.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import useSearch from '@lib/bigcommerce/products/use-search'
 import { Layout } from '@components/core'
-import { Container, Grid } from '@components/ui'
+import { Container, Grid, Skeleton } from '@components/ui'
 import { ProductCard } from '@components/product'
 import {
   filterQuery,
@@ -14,6 +14,7 @@ import {
   getSlug,
   useSearchMeta,
 } from '@utils/search'
+import { range } from 'lodash'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { categories, brands } = await getSiteInfo()
@@ -108,31 +109,47 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          {data ? (
+          <div className="mb-12 animate__animated animate__fadeIn">
-            <>
+            {data ? (
-              {q && (
+              <>
-                <div className="mb-12">
+                <span
-                  {data.found ? (
+                  className={cn('animate__animated', {
-                    <>Showing {data.products.length} results for</>
+                    animate__fadeIn: data.found,
-                  ) : (
+                    hidden: !data.found,
-                    <>There are no products that match</>
+                  })}
-                  )}{' '}
+                >
-                  "<strong>{q}</strong>"
+                  Showing {data.products.length} results for "
-                </div>
+                  <strong>{q}</strong>"
-              )}
+                </span>
-              <Grid
+                <span
-                items={data.products}
+                  className={cn('animate__animated', {
-                layout="normal"
+                    animate__fadeIn: !data.found,
-                wrapper={ProductCard}
+                    hidden: data.found,
-              />
+                  })}
-            </>
+                >
-          ) : (
+                  There are no products that match "<strong>{q}</strong>"
-            // TODO: add a proper loading state
+                </span>
-            <div>
+              </>
-              Searching...
+            ) : (
-              <Skeleton></Skeleton>
+              <>
-            </div>
+                Searching for: "<strong>{q}</strong>"
-          )}
+              </>
+            )}
+          </div>
+          <Grid
+            items={data ? data.products : range(12)}
+            layout="normal"
+            wrapper={
+              data
+                ? ProductCard
+                : () => (
+                    <Skeleton
+                      className="w-full animate__animated animate__fadeIn rounded-md"
+                      height={200}
+                    />
+                  )
+            }
+          />
         </div>
         <div className="col-span-2">
           <ul>

yarn.lock

@@ -2462,6 +2462,11 @@ ally.js@1.4.1:
     css.escape "^1.5.0"
     platform "1.3.3"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 anser@1.4.9:
   version "1.4.9"
   resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"