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

Fix All Image Add Lazy Loading

Browse Source
This commit is contained in:
nico
2025-09-19 10:41:18 +08:00
parent 9f72e94557
commit 068d8b1077
180 changed files with 390 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx
View File

@@ -202,6 +202,7 @@ function EditAPBDes() {
objectFit: 'contain',
border: `1px solid ${colors['blue-button']}`
}}
loading="lazy"
/>
</Box>
)}

1
src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx
View File

@@ -89,6 +89,7 @@ function DetailAPBDes() {
radius="md"
fit="contain"
style={{ border: '1px solid #ddd' }}
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

1
src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
View File

@@ -149,6 +149,7 @@ function CreateAPBDes() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

6
src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
View File

@@ -108,13 +108,15 @@ function ListAPBDes({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/apbdes/${item.id}`)}
fullWidth
>
<IconDeviceImacCog size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

4
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
View File

@@ -66,9 +66,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Program Desa Anti Korupsi</Title>
<Tooltip label="Tambah Program Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light"
onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create')}
>
Tambah Baru

2
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTab.tsx
View File

@@ -85,7 +85,7 @@ function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
</TabsList>
</ScrollArea>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
<TabsPanel key={i} value={e.value}>
<></>
</TabsPanel>
))}

2
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx
View File

@@ -101,7 +101,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
<Tooltip label="Edit" withArrow position="top">
<Button
variant="light"
color="blue"
color="green"
size="sm"
onClick={() => router.push(`/admin/landing-page/prestasi-desa/kategori-prestasi-desa/${item.id}`)}
>

2
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/[id]/edit/page.tsx
View File

@@ -36,6 +36,7 @@ function EditPrestasiDesa() {
})
useEffect(() => {
prestasiState.kategoriPrestasi.findMany.load()
const loadDesaAntiKorupsi = async () => {
const id = params?.id as string;
if (!id) return;
@@ -223,6 +224,7 @@ function EditPrestasiDesa() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading='lazy'
/>
</Box>
)}

2
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/[id]/page.tsx
View File

@@ -18,6 +18,7 @@ function DetailPrestasiDesa() {
const router = useRouter()
useShallowEffect(() => {
prestasiState.kategoriPrestasi.findMany.load()
detailState.findUnique.load(params?.id as string)
}, [])
@@ -93,6 +94,7 @@ function DetailPrestasiDesa() {
w={300}
fit="contain"
style={{ borderRadius: '8px', border: '1px solid #e0e0e0' }}
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

1
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/create/page.tsx
View File

@@ -131,6 +131,7 @@ function CreatePrestasiDesa() {
alt="Pratinjau gambar prestasi"
fit="cover"
style={{ width: '100%', height: 'auto' }}
loading='lazy'
/>
</Box>
</Box>

6
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
View File

@@ -109,12 +109,14 @@ function ListPrestasi({ search }: { search: string }) {
<TableTd style={{ width: '25%', textAlign: 'center' }}>
<Tooltip label="Kelola Prestasi" withArrow>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
size="sm"
>
<IconDeviceImacCog size={20} />
Detail
</Button>
</Tooltip>
</TableTd>

1
src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/edit/page.tsx
View File

@@ -152,6 +152,7 @@ function EditMediaSosial() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

3
src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/page.tsx
View File

@@ -71,7 +71,7 @@ function DetailMediaSosial() {
</Box>
<Box>
<Text fz="lg" fw="bold">Icon / Nomor Telepon</Text>
<Text fz="lg" fw="bold">Link / Nomor Telepon</Text>
<Text fz="md" c="dimmed">{data.iconUrl || '-'}</Text>
</Box>
@@ -85,6 +85,7 @@ function DetailMediaSosial() {
h={120}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

1
src/app/admin/(dashboard)/landing-page/profile/media-sosial/create/page.tsx
View File

@@ -129,6 +129,7 @@ export default function CreateMediaSosial() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

40
src/app/admin/(dashboard)/landing-page/profile/media-sosial/page.tsx
View File

@@ -2,7 +2,7 @@
import colors from '@/con/colors';
import { Box, Button, Center, Group, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -68,7 +68,7 @@ function ListMediaSosial({ search }: { search: string }) {
<TableTr>
<TableTh style={{ width: '25%' }}>Nama Media Sosial / Kontak</TableTh>
<TableTh style={{ width: '20%' }}>Gambar</TableTh>
<TableTh style={{ width: '20%' }}>Icon / No. Telepon</TableTh>
<TableTh style={{ width: '20%' }}>Link / No. Telepon</TableTh>
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
</TableTr>
</TableThead>
@@ -76,31 +76,35 @@ function ListMediaSosial({ search }: { search: string }) {
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd style={{ width: '25%', }}>
<TableTd style={{ width: '25%', }}>
<Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
</TableTd>
<TableTd style={{ width: '20%', }}>
<Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden', }}>
{item.image?.link ? (
<Image src={item.image.link} alt={item.name} fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}
</Box>
<TableTd style={{ width: '20%', }}>
<Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden', }}>
{item.image?.link ? (
<Image loading='lazy' src={item.image.link} alt={item.name} fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}
</Box>
</TableTd>
<TableTd style={{ width: '20%', }}>
<Text truncate fz="sm" c="dimmed">
{item.iconUrl || item.noTelp || '-'}
</Text>
<TableTd style={{ width: '20%', }}>
<Box w={250}>
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
{item.iconUrl || item.noTelp || '-'}
</Text>
</Box>
</TableTd>
<TableTd style={{ width: '15%'}}>
<TableTd style={{ width: '15%' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

3
src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/[id]/page.tsx
View File

@@ -229,6 +229,7 @@ function EditPejabatDesa() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}
@@ -240,7 +241,7 @@ function EditPejabatDesa() {
<Box>
<Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
{previewImage ? (
<Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
<Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" loading="lazy"/>
) : (
<Center w={200} h={200} bg="gray.2">
<Stack align="center" gap="xs">

3
src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/page.tsx
View File

@@ -54,7 +54,7 @@ function Page() {
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" loading="lazy"/>
</Center>
</GridCol>
<GridCol span={12}>
@@ -76,6 +76,7 @@ function Page() {
alt="Foto Profil Pejabat"
radius="md"
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
loading='lazy'
/>
</Center>
<Paper

1
src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/edit/page.tsx
View File

@@ -165,6 +165,7 @@ function EditProgramInovasi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

1
src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/page.tsx
View File

@@ -73,6 +73,7 @@ function DetailProgramInovasi() {
alt="Gambar Program"
radius="md"
style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

1
src/app/admin/(dashboard)/landing-page/profile/program-inovasi/create/page.tsx
View File

@@ -135,6 +135,7 @@ function CreateProgramInovasi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
</Box>
)}

8
src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx
View File

@@ -2,7 +2,7 @@
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -107,14 +107,16 @@ function ListProgramInovasi({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
radius="md"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)
}
>
<IconDeviceImac size={20} />
Detail
</Button>
</TableTd>
</TableTr>

1
src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/edit/page.tsx
View File

@@ -166,6 +166,7 @@ function EditKolaborasiInovasi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
</Box>
)}

1
src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/page.tsx
View File

@@ -87,6 +87,7 @@ function DetailSDGSDesa() {
h={200}
radius="md"
fit="contain"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

1
src/app/admin/(dashboard)/landing-page/sdgs-desa/create/page.tsx
View File

@@ -135,6 +135,7 @@ function CreateSDGsDesa() {
src={previewImage}
alt="Preview"
style={{ width: '100%', height: 'auto' }}
loading="lazy"
/>
</Box>
</Box>

15
src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx
View File

@@ -99,10 +99,7 @@ function ListSdgsDesa({ search }: { search: string }) {
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Sdgs Desa</Title>
<Tooltip label="Tambah Sdgs Desa" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color={colors['blue-button']}
variant="light"
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light"
onClick={() => router.push('/admin/landing-page/sdgs-desa/create')}
>
Tambah Baru
@@ -134,12 +131,14 @@ function ListSdgsDesa({ search }: { search: string }) {
<TableTd style={{ width: '20%', textAlign: 'center' }}>
<Tooltip label="Lihat Detail" withArrow>
<Button
variant="light"
color="blue"
size="sm"
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/sdgs-desa/${item.id}`)}
>
<IconDeviceImacCog size={18} />
Detail
</Button>
</Tooltip>
</TableTd>