page loader

8 files changed, 50 insertions, 16 deletions

diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx
index 360444a6..b2dbd02f 100644
--- a/src/core/components/elements/Link/Link.jsx
+++ b/src/core/components/elements/Link/Link.jsx
@@ -1,14 +1,6 @@
 import NextLink from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 
 const Link = ({ children, ...props }) => {
-  const router = useRouter()
-
-  useEffect(() => {
-    router.events.on('routeChangeComplete', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
-  }, [router])
-
   return (
     <NextLink
       {...props}
diff --git a/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png b/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png
new file mode 100644
index 00000000..2ab07ff5
--- /dev/null
+++ b/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png
diff --git a/src/images/LOGO-INDOTEKNIK-GEAR.png b/src/images/LOGO-INDOTEKNIK-GEAR.png
new file mode 100644
index 00000000..89f749ec
--- /dev/null
+++ b/src/images/LOGO-INDOTEKNIK-GEAR.png
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index 1094e2e4..7559779b 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -200,7 +200,7 @@ const Invoice = ({ id }) => {
                             product?.parent.name,
                             product?.parent.id
                           )}
-                          className='w-[30%] flex-shrink-0'
+                          className='w-[25%] flex-shrink-0'
                         >
                           <Image
                             src={product?.parent?.image}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index f85a0b03..a1c30d00 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -39,8 +39,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`font-normal mb-2 !text-gray_r-12 leading-6 ${
-              simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
+            className={`font-normal mb-2 !text-gray_r-12 leading-6 block ${
+              simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]'
             }`}
           >
             {product?.name}
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index ad59f8dd..7dfb13fb 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -368,7 +368,7 @@ const Transaction = ({ id }) => {
                             product?.parent.name,
                             product?.parent.id
                           )}
-                          className='w-[30%] flex-shrink-0'
+                          className='w-[25%] flex-shrink-0'
                         >
                           <Image
                             src={product?.parent?.image}
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 634e631f..6906cb92 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,11 +1,13 @@
 import '../styles/globals.css'
 import NextProgress from 'next-progress'
-import { useRouter } from 'next/router'
+import { useRouter, Router } from 'next/router'
 import { AnimatePresence } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
 
 const queryClient = new QueryClient()
 
@@ -13,6 +15,18 @@ function MyApp({ Component, pageProps }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
+  const [animateLoader, setAnimateLoader] = useState(false)
+
+  useEffect(() => {
+    Router.events.on('routeChangeStart', () => setAnimateLoader(true))
+    Router.events.on('routeChangeComplete', () => setAnimateLoader(false))
+
+    return () => {
+      Router.events.off('routeChangeStart', () => setAnimateLoader(true))
+      Router.events.off('routeChangeComplete', () => setAnimateLoader(false))
+    }
+  }, [])
+
   const [toasterStyle, setToasterStyle] = useState({})
 
   useEffect(() => {
@@ -30,6 +44,17 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <>
+      {animateLoader && (
+        <div className='w-screen h-screen z-[500] flex justify-center items-center backdrop-blur'>
+          <Image
+            src={IndoteknikLogo}
+            alt='Indoteknik Logo'
+            width={64}
+            height={64}
+            className='page-loader'
+          />
+        </div>
+      )}
       <Toaster
         position='top-center'
         containerStyle={toasterStyle}
@@ -45,7 +70,7 @@ function MyApp({ Component, pageProps }) {
           initial={false}
           onExitComplete={() => window.scrollTo(0, 0)}
         >
-          <Component {...pageProps} key={router.asPath} />
+          {!animateLoader && <Component {...pageProps} key={router.asPath} />}
         </AnimatePresence>
       </QueryClientProvider>
     </>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 551ff057..d97843a9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -133,7 +133,7 @@ button {
     .btn-yellow {
         @apply bg-warning-500
             border-warning-500
-            hover:bg-warning-600
+            hover:bg-warning-500/80
             disabled:text-gray_r-10
             disabled:bg-warning-200
             disabled:border-warning-200;
@@ -151,7 +151,7 @@ button {
         @apply bg-danger-500
             border-danger-500
             text-gray_r-1
-            hover:bg-danger-600
+            hover:bg-danger-500/80
             disabled:text-gray_r-1
             disabled:bg-danger-200
             disabled:border-danger-200;
@@ -602,3 +602,20 @@ button {
         duration-100 
         font-normal;
 }
+
+@keyframes page-loader {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.page-loader {
+    animation-name: page-loader;
+    animation-duration: 1000ms;
+    animation-delay: 50ms;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+}