Skeleton Component

pages/search.tsx

@@ -128,7 +128,10 @@ export default function Search({
             </>
           ) : (
             // TODO: add a proper loading state
-            <div>Searching...</div>
+            <div>
+              Searching...
+              <Skeleton></Skeleton>
+            </div>
           )}
         </div>
         <div className="col-span-2">

pages/ui.tsx

@@ -0,0 +1,14 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { Layout } from '@components/core'
+import { Container, Grid, Skeleton } from '@components/ui'
+export default function Search() {
+  return (
+    <Container>
+      <Skeleton className="w-64 h-12 rounded-md" />
+    </Container>
+  )
+}
+
+Search.Layout = Layout