From bb9a64abe0c4ee7650a010df0226c63556df3f62 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Sat, 19 Nov 2022 11:47:19 +0700
Subject: Add loader

---
 src/pages/_app.js        | 22 +++++++++++++++++++++-
 src/pages/shop/search.js |  8 +++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/_app.js b/src/pages/_app.js
index 136b8cb3..1d8c5ce0 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -2,8 +2,23 @@ import '../styles/globals.css';
 import NextProgress from "next-progress";
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
 
 function MyApp({ Component, pageProps }) {
+  const router = useRouter();
+  const [pageLoading, setPageLoading] = useState(false);
+
+  useEffect(() => {
+    const handleStartLoading = () => { setPageLoading(true) };
+    const handleCompleteLoading = () => { setPageLoading(false) };
+
+    router.events.on('routeChangeStart', handleStartLoading);
+    router.events.on('routeChangeComplete', handleCompleteLoading);
+    router.events.on('routeChangeError', handleCompleteLoading);
+  }, [router]);
+
   return (
     <>
       <ToastContainer 
@@ -17,7 +32,12 @@ function MyApp({ Component, pageProps }) {
       <NextProgress color="#D7A30A" options={{
         showSpinner: false,
       }} />
-      <Component {...pageProps} />
+      {pageLoading ? (
+        <div className='h-screen w-screen flex flex-col justify-center items-center'>
+          <Image src='/images/loading.gif' width={64} height={64} alt='Loading Indoteknik' />
+          <h1>Loading</h1>
+        </div>
+      ) : <Component {...pageProps} />}
     </>
   )
 }
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 9b085ad0..ce76f88e 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -2,6 +2,7 @@ import axios from "axios";
 import Header from "../../components/Header";
 import Pagination from "../../components/Pagination";
 import ProductCard from "../../components/ProductCard";
+import FilterIcon from "../../icons/filter.svg";
 
 export async function getServerSideProps(context) {
   const { q, page = 1 } = context.query;
@@ -20,7 +21,12 @@ export default function ShopSearch({ searchResults, q, page }) {
       <Header title={`Jual ${q} - Indoteknik`} />
       <main>
         <div className="p-4">
-          <h1 className="mb-1">Produk</h1>
+          <div className="flex justify-between items-center gap-x-2 mb-1">
+            <h1>Produk</h1>
+            <button className="btn-light py-1 flex items-center gap-x-2">
+              <FilterIcon className="w-4 h-4" /> <span>Filter</span>
+            </button>
+          </div>
           <div className="text-sm mb-4">
             {productFound > 0 ? (
               <>
-- 
cgit v1.2.3