summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/core/components/elements/DelayRender/DelayRender.js18
-rw-r--r--src/core/components/elements/Spinner/LogoSpinner.jsx3
-rw-r--r--src/lib/home/components/CategoryHome.jsx2
-rw-r--r--src/pages/_document.jsx10
-rw-r--r--src/pages/index.jsx26
5 files changed, 32 insertions, 27 deletions
diff --git a/src/core/components/elements/DelayRender/DelayRender.js b/src/core/components/elements/DelayRender/DelayRender.js
index c0ff0fc0..2d412be7 100644
--- a/src/core/components/elements/DelayRender/DelayRender.js
+++ b/src/core/components/elements/DelayRender/DelayRender.js
@@ -1,17 +1,19 @@
const { useState, useEffect } = require('react')
-const DelayRender = ({ delay, children }) => {
- const [showComponent, setShowComponent] = useState(false)
+const DelayRender = ({ renderAfter = 200, children }) => {
+ const [renderComponent, setRenderComponent] = useState(false)
useEffect(() => {
- const timeout = setTimeout(() => {
- setShowComponent(true)
- }, delay)
+ const renderTimeout = setTimeout(() => {
+ setRenderComponent(true)
+ }, renderAfter)
- return () => clearTimeout(timeout)
- }, [delay])
+ return () => {
+ clearTimeout(renderTimeout)
+ }
+ }, [renderAfter])
- return showComponent && children
+ return renderComponent && children
}
export default DelayRender
diff --git a/src/core/components/elements/Spinner/LogoSpinner.jsx b/src/core/components/elements/Spinner/LogoSpinner.jsx
index 73b84e84..94da5f1d 100644
--- a/src/core/components/elements/Spinner/LogoSpinner.jsx
+++ b/src/core/components/elements/Spinner/LogoSpinner.jsx
@@ -1,9 +1,8 @@
import Image from 'next/image'
-import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png'
const LogoSpinner = ({ ...props }) => (
<Image
- src={IndoteknikLogo}
+ src='/images/logo-indoteknik-gear.png'
alt='Indoteknik Logo'
width={64}
height={64}
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
index 8fe3788c..4566bc4b 100644
--- a/src/lib/home/components/CategoryHome.jsx
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -6,7 +6,7 @@ const CategoryHome = ({ id }) => {
const { categoryHome } = useCategoryHome({ id })
return (
- <div className='p-4 sm:py-8 relative bg-warning-100 border border-warning-300'>
+ <div className='p-4 sm:py-8 relative bg-warning-100 border border-warning-300 min-h-[240px]'>
{categoryHome.data ? (
<ProductSlider
products={{
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index b76f314f..2130c097 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -10,14 +10,16 @@ export default function MyDocument() {
<link rel='icon' href='/favicon.ico' />
<link rel='manifest' href='/manifest.json' />
<link rel='apple-touch-icon' href='/icon.jpg'></link>
- <link rel="apple-touch-startup-image" href="/images/splash/launch.png"/>
+ <link rel='apple-touch-startup-image' href='/images/splash/launch.png' />
<meta name='mobile-web-app-capable' content='yes' />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="default" />
- <meta name="apple-mobile-web-app-title" content="Indoteknik.com" />
+ <meta name='apple-mobile-web-app-capable' content='yes' />
+ <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+ <meta name='apple-mobile-web-app-title' content='Indoteknik.com' />
<meta name='theme-color' content='#fff' />
+ <link rel='prefetch' href='/images/logo-indoteknik-gear.png' />
+
<meta name='facebook-domain-verification' content='328wmjs7hcnz74rwsqzxvq50rmbtm2' />
<Script
async
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 8cf335c4..31c6b240 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,7 +8,6 @@ import Seo from '@/core/components/Seo'
import { useQuery } from 'react-query'
import odooApi from '@/core/api/odooApi'
import Image from 'next/image'
-import CustomerReviews from '@/lib/review/components/CustomerReviews'
import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
@@ -25,6 +24,7 @@ const PopularProduct = dynamic(() => import('@/lib/home/components/PopularProduc
const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'), {
loading: () => <PopularProductSkeleton />
})
+const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews'))
export default function Home() {
const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-a-2')
@@ -70,23 +70,23 @@ export default function Home() {
<HeroBanner />
</div>
<div className='w-3/12'>
- <DelayRender delay={200}>
+ <DelayRender renderAfter={200}>
<PopularProduct />
</DelayRender>
</div>
</div>
<div className='my-16 flex flex-col gap-y-16'>
- <DelayRender delay={300}>
+ <DelayRender renderAfter={400}>
<PreferredBrand />
</DelayRender>
- <DelayRender delay={400}>
+ <DelayRender renderAfter={600}>
<FlashSale />
</DelayRender>
- <DelayRender delay={500}>
+ <DelayRender renderAfter={1000}>
<CategoryHomeId />
</DelayRender>
- <DelayRender delay={600}>
+ <DelayRender renderAfter={1200}>
<CustomerReviews />
</DelayRender>
</div>
@@ -94,21 +94,23 @@ export default function Home() {
</DesktopView>
<MobileView>
- <HeroBanner />
+ <DelayRender renderAfter={200}>
+ <HeroBanner />
+ </DelayRender>
<div className='flex flex-col gap-y-12 my-6'>
- <DelayRender delay={300}>
+ <DelayRender renderAfter={400}>
<PreferredBrand />
</DelayRender>
- <DelayRender delay={600}>
+ <DelayRender renderAfter={600}>
<FlashSale />
</DelayRender>
- <DelayRender delay={900}>
+ <DelayRender renderAfter={800}>
<PopularProduct />
</DelayRender>
- <DelayRender delay={1200}>
+ <DelayRender renderAfter={1000}>
<CategoryHomeId />
</DelayRender>
- <DelayRender delay={1500}>
+ <DelayRender renderAfter={1200}>
<CustomerReviews />
</DelayRender>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:16:26 +0000