Menambahkan seed user

Fix Infinite reload di page ikm dan landing page
This commit is contained in:
2025-11-26 15:01:34 +08:00
parent 29a9a59bca
commit 54232e4465
6 changed files with 106 additions and 32 deletions

View File

@@ -41,7 +41,7 @@ const state = useProxy(indeksKepuasanState.responden);
indeksKepuasanState.jenisKelaminResponden.findMany.load()
indeksKepuasanState.pilihanRatingResponden.findMany.load()
indeksKepuasanState.kelompokUmurResponden.findMany.load()
})
},[])
const handleSubmit = async () => {
try {

View File

@@ -41,7 +41,7 @@ function Kepuasan() {
indeksKepuasanState.jenisKelaminResponden.findMany.load()
indeksKepuasanState.pilihanRatingResponden.findMany.load()
indeksKepuasanState.kelompokUmurResponden.findMany.load()
})
},[])
const handleSubmit = async () => {
try {

View File

@@ -59,6 +59,35 @@ const getWorkStatus = (day: string, currentTime: string): { status: string; mess
: { status: "Tutup", message: "08:00 - 17:00" };
};
// Skeleton component untuk Social Media
const SosmedSkeleton = () => (
<Flex gap="md" justify="center" wrap="wrap">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} height={56} width={56} circle />
))}
</Flex>
);
// Skeleton component untuk Profile
const ProfileSkeleton = () => (
<Card
radius="xl"
bg={colors.grey[1]}
p="lg"
shadow="xl"
w={{ base: "100%", md: "35%" }}
style={{ height: "fit-content" }}
>
<Stack gap="lg" align="center">
<Skeleton height={300} width="100%" radius="lg" />
<Stack gap="xs" w="100%" align="center">
<Skeleton height={20} width="60%" />
<Skeleton height={32} width="80%" />
</Stack>
</Stack>
</Card>
);
function LandingPage() {
const [socialMedia, setSocialMedia] = useState<
Prisma.MediaSosialGetPayload<{ include: { image: true } }>[]
@@ -66,9 +95,8 @@ function LandingPage() {
const [profile, setProfile] = useState<
Prisma.PejabatDesaGetPayload<{ include: { image: true } }> | null
>(null);
const [isLoading, setIsLoading] = useState(true);
const [isLoadingSosmed, setIsLoadingSosmed] = useState(true);
const [isLoadingProfile, setIsLoadingProfile] = useState(true);
useEffect(() => {
const fetchSocialMedia = async () => {
@@ -86,7 +114,7 @@ function LandingPage() {
} catch {
setSocialMedia([]);
} finally {
setIsLoading(false);
setIsLoadingSosmed(false);
}
};
@@ -98,6 +126,8 @@ function LandingPage() {
setProfile(result.data || null);
} catch {
setProfile(null);
} finally {
setIsLoadingProfile(false);
}
};
@@ -189,8 +219,8 @@ function LandingPage() {
<ModuleView />
{isLoading ? (
<Skeleton height={32} width="100%" />
{isLoadingSosmed ? (
<SosmedSkeleton />
) : socialMedia.length > 0 ? (
<SosmedView data={socialMedia} />
) : (
@@ -207,19 +237,27 @@ function LandingPage() {
</Card>
</Stack>
{isLoading ? (
<Skeleton height={300} width="100%" radius="lg" />
{isLoadingProfile ? (
<ProfileSkeleton />
) : profile ? (
<ProfileView data={profile} />
) : (
<Center w="100%">
<Text c="dimmed">Informasi profil belum tersedia</Text>
</Center>
<Card
radius="xl"
bg={colors.grey[1]}
p="lg"
shadow="xl"
w={{ base: "100%", md: "35%" }}
style={{ height: "fit-content" }}
>
<Center h={300}>
<Text c="dimmed">Informasi profil belum tersedia</Text>
</Center>
</Card>
)}
</Flex>
</Stack>
);
}
export default LandingPage;
export default LandingPage;

View File

@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import DesaAntiKorupsi from "@/app/darmasaba/_com/main-page/desaantikorupsi";
import Kepuasan from "@/app/darmasaba/_com/main-page/kepuasan";
@@ -13,32 +14,34 @@ import Apbdes from "./_com/main-page/apbdes";
import Prestasi from "./_com/main-page/prestasi";
import ScrollToTopButton from "./_com/scrollToTopButton";
import NewsReaderLanding from "./_com/NewsReaderalanding";
import ModernNewsNotification from "./_com/ModernNeewsNotification";
import { useMemo } from "react";
import { useProxy } from "valtio/utils";
import { useEffect, useMemo } from "react";
import { useSnapshot } from "valtio";
import stateDashboardBerita from "../admin/(dashboard)/_state/desa/berita";
import stateDesaPengumuman from "../admin/(dashboard)/_state/desa/pengumuman";
import { useEffect } from "react";
import ModernNewsNotification from "./_com/ModernNeewsNotification";
import NewsReaderLanding from "./_com/NewsReaderalanding";
export default function Page() {
const featured = useProxy(stateDashboardBerita.berita.findFirst);
const snap1 = useSnapshot(stateDashboardBerita.berita.findFirst);
const snap2 = useSnapshot(stateDesaPengumuman.pengumuman.findFirst);
const featured = snap1;
const pengumuman = snap2;
const loadingFeatured = featured.loading;
const pengumuman = useProxy(stateDesaPengumuman.pengumuman.findFirst);
const loadingPengumuman = pengumuman.loading;
useEffect(() => {
if (!featured.data && !loadingFeatured) {
stateDashboardBerita.berita.findFirst.load();
}
}, [featured.data, loadingFeatured]);
}, []);
useEffect(() => {
if (!pengumuman.data && !loadingPengumuman) {
stateDesaPengumuman.pengumuman.findFirst.load();
}
}, [pengumuman.data, loadingPengumuman]);
}, []);
const newsData = useMemo(() => {