Fix All Image Add Lazy Loading
This commit is contained in:
@@ -227,6 +227,7 @@ function EditArtikelKesehatan() {
|
||||
objectFit: "contain",
|
||||
border: `1px solid ${colors["blue-button"]}`,
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -93,6 +93,7 @@ function DetailArtikelKesehatan() {
|
||||
h={200}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
|
||||
|
||||
@@ -158,6 +158,7 @@ function CreateArtikelKesehatan() {
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -195,6 +195,7 @@ function EditInfoWabahPenyakit() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -104,6 +104,7 @@ function DetailInfoWabahPenyakit() {
|
||||
alt="gambar wabah"
|
||||
radius="md"
|
||||
mt="xs"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="md" c="dimmed">-</Text>
|
||||
|
||||
@@ -168,6 +168,7 @@ function CreateInfoWabahPenyakit() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -177,6 +177,7 @@ function EditKontakDarurat() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -89,6 +89,7 @@ function DetailKontakDarurat() {
|
||||
alt="gambar"
|
||||
radius="md"
|
||||
maw={300}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="md" c="dimmed">-</Text>
|
||||
|
||||
@@ -180,6 +180,7 @@ function CreateKontakDarurat() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -180,6 +180,7 @@ function EditPenangananDarurat() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -89,6 +89,7 @@ function DetailPenangananDarurat() {
|
||||
radius="md"
|
||||
mah={250}
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -184,6 +184,7 @@ function CreatePenangananDarurat() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -181,6 +181,7 @@ function EditPosyandu() {
|
||||
objectFit: 'contain',
|
||||
border: `1px solid ${colors['blue-button']}`,
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -117,6 +117,7 @@ function DetailPosyandu() {
|
||||
h={200}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
|
||||
|
||||
@@ -144,6 +144,7 @@ function CreatePosyandu() {
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -195,6 +195,7 @@ function EditProgramKesehatan() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -173,6 +173,7 @@ function CreateProgramKesehatan() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -299,6 +299,7 @@ function EditPuskesmas() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -207,6 +207,7 @@ function CreatePuskesmas() {
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user