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

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

View File

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

View File

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

View File

@@ -22,7 +22,7 @@ import {
Tooltip
} from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconDeviceImacCog, 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 { Bar, BarChart, Tooltip as ChartTooltip, Legend, XAxis, YAxis } from 'recharts';
@@ -32,17 +32,9 @@ import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafi
function GrafikHasilKepuasanMasyarakat() {
const [search, setSearch] = useState("");
const router = useRouter();
return (
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={25} />
</Button>
</Box>
{/* Header Search */}
<HeaderSearch
title='Grafik Hasil Kepuasan Masyarakat'

View File

@@ -37,7 +37,7 @@ function Kelahiran() {
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<Button variant="subtle" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')}>
<IconArrowBack color={colors["blue-button"]} size={25} />
</Button>
</Box>

View File

@@ -37,7 +37,7 @@ function Kematian() {
<Box>
{/* Tombol Back */}
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<Button variant="subtle" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian')}>
<IconArrowBack color={colors["blue-button"]} size={30} />
</Button>
</Box>

View File

@@ -195,6 +195,7 @@ function EditInfoWabahPenyakit() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -104,6 +104,7 @@ function DetailInfoWabahPenyakit() {
alt="gambar wabah"
radius="md"
mt="xs"
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

View File

@@ -168,6 +168,7 @@ function CreateInfoWabahPenyakit() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -115,7 +115,7 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
</Text>
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -177,6 +177,7 @@ function EditKontakDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -89,6 +89,7 @@ function DetailKontakDarurat() {
alt="gambar"
radius="md"
maw={300}
loading="lazy"
/>
) : (
<Text fz="md" c="dimmed">-</Text>

View File

@@ -180,6 +180,7 @@ function CreateKontakDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -110,7 +110,7 @@ function ListKontakDarurat({ search }: { search: string }) {
<Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -180,6 +180,7 @@ function EditPenangananDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -89,6 +89,7 @@ function DetailPenangananDarurat() {
radius="md"
mah={250}
fit="contain"
loading="lazy"
/>
</Box>

View File

@@ -184,6 +184,7 @@ function CreatePenangananDarurat() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -114,7 +114,7 @@ function ListPenangananDarurat({ search }: { search: string }) {
/>
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" />
<Image w={100} src={item.image?.link} alt="image" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

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

View File

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

View File

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

View File

@@ -195,6 +195,7 @@ function EditProgramKesehatan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -84,7 +84,7 @@ function DetailProgramKesehatan() {
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data?.image?.link ? (
<Image src={data.image.link} alt="gambar program kesehatan" radius="md" />
<Image src={data.image.link} alt="gambar program kesehatan" radius="md" loading="lazy"/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}

View File

@@ -173,6 +173,7 @@ function CreateProgramKesehatan() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -107,7 +107,7 @@ function ListProgramKesehatan({ search }: { search: string }) {
<Text fz="sm" truncate="end" lineClamp={2} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
</TableTd>
<TableTd>
<Image w={100} src={item.image?.link} alt="image" radius="md" />
<Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button

View File

@@ -299,6 +299,7 @@ function EditPuskesmas() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -86,7 +86,7 @@ function DetailPuskesmas() {
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data?.image?.link ? (
<Image src={data.image.link} alt="gambar" radius="md" />
<Image src={data.image.link} alt="gambar" radius="md" loading="lazy"/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}

View File

@@ -207,6 +207,7 @@ function CreatePuskesmas() {
borderRadius: '8px',
border: '1px solid #ddd',
}}
loading="lazy"
/>
</Box>
)}

View File

@@ -105,7 +105,7 @@ function ListPuskesmas({ search }: { search: string }) {
</TableTd>
<TableTd>{item.alamat}</TableTd>
<TableTd>
<Image w={100} src={item.image.link} alt="image" radius="md" />
<Image w={100} src={item.image.link} alt="image" radius="md" loading="lazy"/>
</TableTd>
<TableTd>
<Button