Fix All Image Add Lazy Loading

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -352,17 +352,19 @@ const posisiOrganisasi = proxy({
     totalPages: 1,
     loading: false,
     search: "",
-   load: async (page = 1, limit = 10, search = "") => {
+    load: async (page = 1, limit?: number, search = "") => {
-      posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      const appliedLimit = limit ?? 10;
       posisiOrganisasi.findMany.page = page;
       posisiOrganisasi.findMany.search = search;
-  
+
       try {
-        const query: any = { page, limit };
+        const query: any = { page, limit: appliedLimit };
         if (search) query.search = search;
-    
+
-        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi["find-many"].get({ query });
+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
-    
+          "find-many"
+        ].get({ query });
+
         if (res.status === 200 && res.data?.success) {
           posisiOrganisasi.findMany.data = res.data.data ?? [];
           posisiOrganisasi.findMany.totalPages = res.data.totalPages ?? 1;

src/app/admin/(dashboard)/auth/login-admin/page.tsx

@@ -51,7 +51,7 @@ function Login() {
                   Login
                 </Title>
                 <Center>
-                  <Image src={"/darmasaba-icon.png"} alt="" w={80} />
+                  <Image loading="lazy" src={"/darmasaba-icon.png"} alt="" w={80} />
                 </Center>
               </Box>
               <Box>

src/app/admin/(dashboard)/auth/registrasi-admin/page.tsx

@@ -63,7 +63,7 @@ function Registrasi() {
                 Registrasi
               </Title>
               <Center>
-                <Image src={"/darmasaba-icon.png"} alt="" w={80} />
+                <Image loading="lazy" src={"/darmasaba-icon.png"} alt="" w={80} />
               </Center>
               <Box>
                 <TextInput placeholder='Username'

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

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

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

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

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

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

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

@@ -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%" />
                         )}

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

@@ -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

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

@@ -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>
             )}

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

@@ -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">

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

@@ -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>
             ) : (

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

@@ -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} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

@@ -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>
             )}

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

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

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

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

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

@@ -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"
+                       size="xs"
-                        color="blue"
+                       radius="md"
+                       variant="light"
+                       color="blue"
+                       leftSection={<IconDeviceImacCog size={16} />}
                         onClick={() =>
                           router.push(`/admin/desa/penghargaan/${item.id}`)
                         }
                       >
-                        <IconDeviceImac size={20} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

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

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

@@ -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>

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

@@ -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>

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

@@ -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} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

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

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

@@ -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>

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

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

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

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

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

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

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

@@ -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} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

@@ -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">

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

@@ -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

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/page.tsx

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

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx

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

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx

@@ -208,6 +208,7 @@ export default function EditPegawai() {
                   fit="cover"
                   radius="sm"
                   mt="md"
+                  loading="lazy"
                 />
               )}
             </Box>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx

@@ -60,7 +60,7 @@ function DetailPegawai() {
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Image</Text>
                 {statePegawai.findUnique.data?.image?.link ? (
-                  <Image src={statePegawai.findUnique.data?.image?.link} alt='' />
+                  <Image src={statePegawai.findUnique.data?.image?.link} alt='' loading="lazy" />
                 ) : (
                   <Text fz={"md"} c="dimmed">Tidak ada gambar</Text>
                 )}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx

@@ -141,6 +141,7 @@ function CreatePegawai() {
                   fit="cover"
                   radius="sm"
                   mt="md"
+                  loading="lazy"
                 />
               )}
             </Box>

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/page.tsx

@@ -60,7 +60,7 @@ function DetailDesaDigital() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" />
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
                 </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

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

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/page.tsx

@@ -60,7 +60,7 @@ function DetailInfoTeknologiTepatGuna() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateInfoTekno.findUnique.data?.image?.link} alt="gambar" />
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateInfoTekno.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
                 </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx

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

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx

@@ -129,7 +129,7 @@ function EditFoto() {
             </Dropzone>
 
             {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
+              <Image alt="" src={previewImage} w={200} h={200} loading="lazy"/>
             ) : (
               <Center w={200} h={200} bg={"gray"}>
                 <IconImageInPicture />

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx

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

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx

@@ -129,6 +129,7 @@ function ListMitraKolaborasi({ search }: { search: string }) {
                         objectFit: 'cover',
                         objectPosition: 'center'
                       }}
+                      loading="lazy"
                     />
                   </Box>
                 </TableTd>

src/app/admin/(dashboard)/inovasi/layanan-online-desa/pengaduan-masyarakat/[id]/page.tsx

@@ -102,7 +102,7 @@ function DetailPengaduanMasyarakat() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={pengaduanState.pengaduanMasyarakat.findUnique.data?.image?.link} alt="gambar" />
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={pengaduanState.pengaduanMasyarakat.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
                 </Box>
               </Stack>
             </Paper>

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx

@@ -186,7 +186,7 @@ function EditKeamananLingkungan() {
           </Dropzone>
 
           {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
+            <Image alt="" src={previewImage} w={200} h={200} loading="lazy"/>
           ) : (
             <Center w={200} h={200} bg={"gray"}>
               <IconImageInPicture />

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -77,6 +77,7 @@ function DetailKeamananLingkungan() {
                   w={{ base: 150, md: 490 }}
                   src={data?.image?.link}
                   alt="gambar keamanan lingkungan"
+                  loading="lazy"
                 />
               </Box>
 

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/page.tsx

@@ -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'

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/page.tsx

@@ -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>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/page.tsx

@@ -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>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -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

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -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

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -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

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -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>
                 )}

src/app/admin/(dashboard)/kesehatan/program-kesehatan/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -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

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/page.tsx

@@ -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>
                 )}

src/app/admin/(dashboard)/kesehatan/puskesmas/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -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

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

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

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

@@ -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>

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

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

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

@@ -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} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

@@ -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
+              <Button leftSection={<IconPlus size={18} />} color="blue" variant="light"
-                leftSection={<IconPlus size={18} />}
-                color="blue"
                 onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create')}
               >
                 Tambah Baru

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

@@ -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>
         ))}

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

@@ -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}`)}
                         >

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

@@ -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>
             )}

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

@@ -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>

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

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

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

@@ -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>

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

@@ -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>
             )}

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

@@ -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>

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

@@ -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>
             )}

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

@@ -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%',  }}>
+                    <TableTd style={{ width: '20%', }}>
-                        <Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden',  }}>
+                      <Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden', }}>
-                          {item.image?.link ? (
+                        {item.image?.link ? (
-                            <Image src={item.image.link} alt={item.name} fit="cover" />
+                          <Image loading='lazy' src={item.image.link} alt={item.name} fit="cover" />
-                          ) : (
+                        ) : (
-                            <Box bg={colors['blue-button']} w="100%" h="100%" />
+                          <Box bg={colors['blue-button']} w="100%" h="100%" />
-                          )}
+                        )}
-                        </Box>
+                      </Box>
                     </TableTd>
-                    <TableTd style={{ width: '20%',  }}>
+                    <TableTd style={{ width: '20%', }}>
-                      <Text truncate fz="sm" c="dimmed">
+                      <Box w={250}>
-                        {item.iconUrl || item.noTelp || '-'}
+                        <Text truncate fz="sm" c="dimmed" lineClamp={1}>
-                      </Text>
+                          {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} />
+                        Detail
-                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>

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

@@ -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">

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

@@ -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

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

@@ -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>
             )}

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

@@ -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>

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

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

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

@@ -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>