Fix All Image Add Lazy Loading

This commit is contained in:
2025-09-19 10:41:18 +08:00
parent 9f72e94557
commit 068d8b1077
180 changed files with 390 additions and 323 deletions

View File

@@ -81,8 +81,8 @@ function ListDaftarInformasi({ search }: { search: string }) {
<TableTr>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '25%' }}>Jenis Informasi</TableTh>
<TableTh style={{ width: '60%' }}>Deskripsi</TableTh>
<TableTh style={{ width: '10%', textAlign: 'center' }}>Aksi</TableTh>
<TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -93,7 +93,9 @@ function ListDaftarInformasi({ search }: { search: string }) {
</TableTd>
<TableTd>
<Tooltip label={item.jenisInformasi} position="top-start" openDelay={500}>
<Text fw={500} lineClamp={1}>{item.jenisInformasi}</Text>
<Box w={200}>
<Text fw={500} lineClamp={1}>{item.jenisInformasi}</Text>
</Box>
</Tooltip>
</TableTd>
<TableTd>
@@ -104,20 +106,24 @@ function ListDaftarInformasi({ search }: { search: string }) {
multiline
maw={400}
>
<Text lineClamp={1} fz="sm" c="dimmed">
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80) + '...'}
</Text>
<Box w={200}>
<Text lineClamp={1} fz="sm" c="dimmed">
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80) + '...'}
</Text>
</Box>
</Tooltip>
</TableTd>
<TableTd style={{ textAlign: 'center' }}>
<Tooltip label="Lihat Detail" withArrow>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
size="sm"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}
>
<IconDeviceImacCog size={20} />
Detail
</Button>
</Tooltip>
</TableTd>

View File

@@ -59,7 +59,7 @@ function Page() {
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
</GridCol>
<GridCol span={12}>

View File

@@ -1,7 +1,7 @@
'use client';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -112,11 +112,14 @@ function ListResponden({ search }: ListRespondenProps) {
<TableTd style={{ width: '20%' }}>{item.jenisKelamin.name}</TableTd>
<TableTd style={{ width: '15%', textAlign: 'center' }}>
<Button
variant="light"
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}
>
<IconDeviceImac size={20} />
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -28,6 +28,7 @@ function EditProfilePPID() {
// Load data on mount
useEffect(() => {
const loadData = async () => {
const id = params?.id as string;
if (!id) {
@@ -230,6 +231,7 @@ function EditProfilePPID() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading='lazy'
/>
</Box>
)}

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

View File

@@ -51,9 +51,9 @@ export default function EditPegawaiPPID() {
};
useEffect(() => {
stateStrukturPPID.posisiOrganisasi.findMany.load();
const loadPegawai = async () => {
try {
await stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0); // ambil semua data
const data = await stateOrganisasi.edit.load(id);
if (data) {
setFormData({
@@ -81,6 +81,8 @@ export default function EditPegawaiPPID() {
);
}
};
console.log('Current posisiId:', formData.posisiId);
console.log('Available positions:', stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => p.id));
loadPegawai();
}, [id]);
@@ -223,6 +225,7 @@ export default function EditPegawaiPPID() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading='lazy'
/>
</Box>
)}
@@ -314,7 +317,7 @@ export default function EditPegawaiPPID() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan Perubahan
Simpan
</Button>
</Group>
</Stack>

View File

@@ -17,6 +17,7 @@ function DetailPegawai() {
const router = useRouter();
useShallowEffect(() => {
stateStrukturPPID.posisiOrganisasi.findMany.load();
statePegawai.findUnique.load(params?.id as string);
}, []);
@@ -117,6 +118,7 @@ function DetailPegawai() {
border: '1px solid #e0e0e0',
borderRadius: '8px',
}}
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed" mt="sm">Tidak ada foto profil</Text>

View File

@@ -16,7 +16,7 @@ function CreatePegawaiPPID() {
const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
useEffect(() => {
stateStrukturPPID.posisiOrganisasi.findMany.load();
stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0);
resetForm();
}, []);
@@ -183,6 +183,7 @@ function CreatePegawaiPPID() {
border: '1px solid #e0e0e0',
borderRadius: '8px',
}}
loading='lazy'
/>
</Box>
)}

View File

@@ -59,10 +59,10 @@ function ListPegawaiPPID({ search }: { search: string }) {
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pegawai PPID</Title>
<Tooltip label="Tambah Pegawai Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
>
Tambah Baru
@@ -82,10 +82,10 @@ function ListPegawaiPPID({ search }: { search: string }) {
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pegawai PPID</Title>
<Tooltip label="Tambah Pegawai Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
>
Tambah Baru
@@ -152,12 +152,14 @@ function ListPegawaiPPID({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/struktur-ppid/pegawai/${item.id}`)}
size="sm"
>
<IconDeviceImacCog size={20} />
Detail
</Button>
</TableTd>
</TableTr>

View File

@@ -118,6 +118,7 @@ function nodeTemplate(node: any) {
style={{
border: '1px solid #D3D1D1FF',
}}
loading='lazy'
/>
</Tooltip>
<Text fw={600} ta="center" size="sm">{name}</Text>

View File

@@ -60,7 +60,7 @@ function VisiMisiPPIDList() {
<Grid>
<GridCol span={12}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
</GridCol>
<GridCol span={12}>