wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Add Debounched Search Menu Ekonomi, Inovasi, Keamanan

Browse Source
This commit is contained in:
nico
2025-08-25 21:47:45 +08:00
parent f63249327d
commit b21e1f0c2e
6 changed files with 81 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx
View File

@@ -2,7 +2,7 @@
import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
import colors from '@/con/colors';
import { Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
import { motion } from 'motion/react';
import { useRouter } from 'next/navigation';
@@ -14,6 +14,7 @@ function Page() {
const router = useRouter()
const state = useProxy(pasarDesaState.pasarDesa)
const [search, setSearch] = useState('');
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const {
data,
@@ -35,8 +36,8 @@ function Page() {
: data;
useShallowEffect(() => {
load(page, 4, search, selectedCategory || undefined)
}, [page, search, selectedCategory])
load(page, 4, debouncedSearch, selectedCategory || undefined)
}, [page, debouncedSearch, selectedCategory])
if (loading || !data) {

7
src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx
View File

@@ -6,7 +6,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
import programKemiskinanState from '@/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons-react';
interface StatistikData {
@@ -31,6 +31,7 @@ interface ProgramKemiskinanData {
function Page() {
const [search, setSearch] = useState('')
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
const state = useProxy(programKemiskinanState)
const {
@@ -42,8 +43,8 @@ function Page() {
} = state.findMany
useShallowEffect(() => {
load(page, 2, search)
}, [page, search])
load(page, 2, debouncedSearch)
}, [page, debouncedSearch])
if (loading || !data) {
return (