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)/desa/berita/list-berita/[id]/edit/page.tsx
View File

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

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

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

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

@@ -183,6 +183,7 @@ export default function CreateBerita() {
objectFit: 'contain',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

2
src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
View File

@@ -114,7 +114,7 @@ function ListBerita({ search }: { search: string }) {
style={{ borderRadius: 8, overflow: 'hidden' }}
>
{item.image?.link ? (
<Image src={item.image.link} alt="gambar" fit="cover" />
<Image loading='lazy' src={item.image.link} alt="gambar" fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}

1
src/app/admin/(dashboard)/desa/gallery/foto/page.tsx
View File

@@ -131,6 +131,7 @@ export default function ListImage() {
h={120}
fit="contain"
opacity={0.7}
loading="lazy"
/>
<Text c="dimmed" ta="center">
Belum ada foto yang tersedia

2
src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
View File

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

2
src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx
View File

@@ -110,6 +110,7 @@ function DetailSuratKeterangan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">
@@ -130,6 +131,7 @@ function DetailSuratKeterangan() {
h={200}
radius="md"
fit="cover"
loading="lazy"
/>
) : (
<Text fz="sm" c="dimmed">

2
src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
View File

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

8
src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
View File

@@ -20,7 +20,7 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -124,14 +124,16 @@ function ListSuratKeterangan({ search }: { search: string }) {
</TableTd>
<TableTd style={{ width: '15%' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

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

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

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

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

1
src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx
View File

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

12
src/app/admin/(dashboard)/desa/penghargaan/page.tsx
View File

@@ -21,7 +21,7 @@ import {
Title,
Tooltip
} from '@mantine/core';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -113,14 +113,16 @@ function ListPenghargaan({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
variant="light"
color="blue"
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/desa/penghargaan/${item.id}`)
}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

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

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

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

@@ -90,6 +90,7 @@ export default function DetailPotensi() {
h={200}
radius="md"
fit="cover"
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

3
src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx
View File

@@ -165,6 +165,7 @@ function CreatePotensi() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading='lazy'
/>
</Box>
)}
@@ -195,7 +196,7 @@ function CreatePotensi() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan Potensi
Simpan
</Button>
</Group>
</Stack>

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

@@ -120,12 +120,14 @@ function ListPotensi({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}
>
<IconDeviceImacCog size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

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

@@ -241,6 +241,7 @@ function Page() {
height={180}
fit="cover"
radius="sm"
loading='lazy'
/>
<TextInput
label={`Label Gambar ${index + 1}`}

9
src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx
View File

@@ -55,7 +55,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -102,7 +102,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -152,7 +152,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -199,7 +199,7 @@ function Page() {
<Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
<Stack gap={0}>
<Center>
<Image src="/pudak-icon.png" w={{ base: 150, md: 250 }} alt="Maskot Desa" />
<Image loading='lazy' src="/pudak-icon.png" w={{ base: 150, md: 250 }} alt="Maskot Desa" />
</Center>
<Paper
bg={colors['blue-button']}
@@ -228,6 +228,7 @@ function Page() {
fit="cover"
radius="md"
style={{ border: '1px solid #ccc' }}
loading='lazy'
/>
</Center>
<Text ta="center" mt="xs" fw="bold">{img.label}</Text>

1
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx
View File

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

1
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/page.tsx
View File

@@ -75,6 +75,7 @@ function DetailPerbekelDariMasa() {
h={150}
radius="md"
fit="cover"
loading='lazy'
/>
) : (
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>

1
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/create/page.tsx
View File

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

8
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx
View File

@@ -2,7 +2,7 @@
import colors from '@/con/colors';
import { Box, Button, Center, Group, 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';
@@ -82,12 +82,14 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
<IconDeviceImac size={20} />
<Text ml={5}>Detail</Text>
Detail
</Button>
</TableTd>
</TableTr>

2
src/app/admin/(dashboard)/desa/profile/profile-perbekel/[id]/page.tsx
View File

@@ -145,7 +145,7 @@ function ProfilePerbekel() {
{/* Preview */}
<Box mt="sm">
{previewImage ? (
<Image src={previewImage} alt="Preview" w={200} h={200} fit="cover" radius="md" />
<Image loading='lazy' src={previewImage} alt="Preview" w={200} h={200} fit="cover" radius="md" />
) : (
<Center w={200} h={200} bg="gray.2">
<Stack align="center" gap="xs">

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

@@ -56,7 +56,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}>
@@ -77,6 +77,7 @@ function Page() {
alt="Foto Profil Perbekel"
radius="md"
onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
loading='lazy'
/>
</Center>
<Paper