From fddf85df4be599186bef1844da4cfda2826c53f0 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 15 Oct 2020 11:45:01 -0300 Subject: [PATCH] Adding Search Skeleton --- components/ui/Skeleton/Skeleton.module.css | 31 ++++------ components/ui/_BLANK/Featurebar.tsx | 15 ----- components/ui/_BLANK/index.ts | 1 - package.json | 1 + pages/_app.tsx | 7 ++- pages/search.tsx | 69 ++++++++++++++-------- yarn.lock | 5 ++ 7 files changed, 63 insertions(+), 66 deletions(-) delete mode 100644 components/ui/_BLANK/Featurebar.tsx delete mode 100644 components/ui/_BLANK/index.ts diff --git a/components/ui/Skeleton/Skeleton.module.css b/components/ui/Skeleton/Skeleton.module.css index a33e84ba2..6def0a5e0 100644 --- a/components/ui/Skeleton/Skeleton.module.css +++ b/components/ui/Skeleton/Skeleton.module.css @@ -1,25 +1,14 @@ .skeleton { - @apply block rounded-md; - - &.loaded { - width: unset !important; - } - - &:not(.wrapper):not(.show) { - display: none; - } - - &::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; - } + @apply block rounded; + 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 { diff --git a/components/ui/_BLANK/Featurebar.tsx b/components/ui/_BLANK/Featurebar.tsx deleted file mode 100644 index feb080508..000000000 --- a/components/ui/_BLANK/Featurebar.tsx +++ /dev/null @@ -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 = ({ children, className }) => { - const rootClassName = cn(s.root, className) - return
{children}
-} - -export default Featurebar diff --git a/components/ui/_BLANK/index.ts b/components/ui/_BLANK/index.ts deleted file mode 100644 index 44f51698d..000000000 --- a/components/ui/_BLANK/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Featurebar' diff --git a/package.json b/package.json index 70e57a8e4..9065b6c22 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 51f376b77..787a7758d 100644 --- a/pages/_app.tsx +++ b/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' diff --git a/pages/search.tsx b/pages/search.tsx index 22e5667a8..715448303 100644 --- a/pages/search.tsx +++ b/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({
- {data ? ( - <> - {q && ( -
- {data.found ? ( - <>Showing {data.products.length} results for - ) : ( - <>There are no products that match - )}{' '} - "{q}" -
- )} - - - ) : ( - // TODO: add a proper loading state -
- Searching... - -
- )} +
+ {data ? ( + <> + + Showing {data.products.length} results for " + {q}" + + + There are no products that match "{q}" + + + ) : ( + <> + Searching for: "{q}" + + )} +
+ ( + + ) + } + />
    diff --git a/yarn.lock b/yarn.lock index 80d6462f1..ab7db8d46 100644 --- a/yarn.lock +++ b/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"