diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index dfd03e31..4f8e5261 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -1,6 +1,5 @@ "use client"; import React, { useEffect, useState } from "react"; -import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear, secondToTimes } from "@/utils/globals"; @@ -8,14 +7,13 @@ import { useParams, usePathname, useSearchParams } from "next/navigation"; import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/service/landing/landing"; import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; import LandingPagination from "@/components/landing-page/pagination"; -import { Reveal } from "@/components/landing-page/Reveal"; import { Link, useRouter } from "@/i18n/routing"; import { Input } from "@/components/ui/input"; import ReactDatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { close, loading } from "@/config/swal"; -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import { useTranslations } from "next-intl"; +import { Skeleton } from "@/components/ui/skeleton"; const columns: ColumnDef[] = [ { @@ -70,9 +68,18 @@ const FilterPage = () => { const [categories, setCategories] = useState([]); const [userLevels, setUserLevels] = useState([]); const t = useTranslations("FilterPage"); + const [isLoading, setIsLoading] = useState(true); // const [startDate, endDate] = dateRange; + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); if (pageFromUrl) { @@ -466,8 +473,8 @@ const FilterPage = () => { - {/* Konten Kanan */} -
+ {/* Right */} +

{t("sortBy")}

- {audioData?.length > 0 ? ( -
- {audioData?.map((audio: any) => ( -
- -
-
-
- - - -
-
-
- {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | -  {audio?.clickCount}{" "} -
-
{audio?.title}
-
-
- -
- wave - - - -

{audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}

- -
-
- -
- ))} -
+ {isLoading ? ( + <> +
+ + + + + + +
+ ) : ( -

- empty -

+ <> + {audioData?.length > 0 ? ( +
+ {audioData?.map((audio: any) => ( +
+ +
+
+
+ + + +
+
+
+
+ {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} +
+
+ |  + +  {audio?.clickCount}{" "} +
+
+ +
{audio?.title}
+
+
+ +
+ wave + + + +

{audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}

+ +
+
+ +
+ ))} +
+ ) : ( +

+ empty +

+ )} + )} diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index 01e16399..164e8857 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { close, loading } from "@/config/swal"; import { useTranslations } from "next-intl"; +import { Skeleton } from "@/components/ui/skeleton"; const columns: ColumnDef[] = [ { @@ -68,9 +69,18 @@ const FilterPage = () => { const [handleClose, setHandleClose] = useState(false); const [categories, setCategories] = useState([]); const [userLevels, setUserLevels] = useState([]); + const [isLoading, setIsLoading] = useState(true); // const [startDate, endDate] = dateRange; + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); if (pageFromUrl) { @@ -497,7 +507,7 @@ const FilterPage = () => {
- {/* Konten Kanan */} + {/* Right */}
@@ -508,37 +518,56 @@ const FilterPage = () => {
- {documentData?.length > 0 ? ( -
- {documentData?.map((document: any) => ( - -
- - - -
-
-
- {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 -
-
{document?.title}
-
- - - - Download Dokumen -
-
- - ))} + {isLoading ? ( +
+
+ + +
+
+ + +
+
+ + +
) : ( -

- empty -

+ <> + {documentData?.length > 0 ? ( +
+ {documentData?.map((document: any) => ( + +
+ + + +
+
+
+ {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 +
+
{document?.title}
+
+ + + + Download Dokumen +
+
+ + ))} +
+ ) : ( +

+ empty +

+ )} + )} diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index b094b71e..ab4feb5b 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -18,6 +18,7 @@ import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals"; import withReactContent from "sweetalert2-react-content"; import Swal from "sweetalert2"; import parse from "html-react-parser"; +import { Skeleton } from "@/components/ui/skeleton"; const DetailInfo = () => { const MySwal = withReactContent(Swal); @@ -48,9 +49,18 @@ const DetailInfo = () => { const userRoleId = getCookiesDecrypt("urie"); const [message, setMessage] = useState(""); const [listSuggestion, setListSuggestion] = useState(); + const [isLoading, setIsLoading] = useState(true); let typeString = "image"; + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); + useEffect(() => { initFetch(); checkWishlist(); @@ -425,34 +435,55 @@ const DetailInfo = () => { {/* Bagian Kiri */}
{/* Gambar Besar */} -
- Main -
-
+ {isLoading ? ( +
+ +
+ ) : ( +
+ Main +
+
+ )} {/* Gambar bawah Kecil */} -
- {detailDataImage?.files?.map((file: any, index: number) => ( - setSelectedImage(index)} key={file?.id}> - - - ))} -
+ {isLoading ? ( +
+ + + +
+ ) : ( +
+ {detailDataImage?.files?.map((file: any, index: number) => ( + setSelectedImage(index)} key={file?.id}> + + + ))} +
+ )} {/* Footer Informasi */} -
-
- oleh {detailDataImage?.uploadedBy?.userLevel?.name}  |  Diupdate pada {detailDataImage?.updatedAt} WIB  |  - -   {detailDataImage?.clickCount}   -

Kreator: {detailDataImage?.creatorName}

+
+
+

+ oleh {detailDataImage?.uploadedBy?.userLevel?.name} +

+

 | Diupdate pada {detailDataImage?.updatedAt} WIB  | 

+

+ +   {detailDataImage?.clickCount}   +

+
+
+

Kreator: {detailDataImage?.creatorName}

{/* Keterangan */}

{detailDataImage?.title}

-
+
@@ -522,7 +553,7 @@ const DetailInfo = () => { {/* Tombol Bagikan */} -
+

Bagikan

handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}`)}> @@ -562,7 +593,7 @@ const DetailInfo = () => {

Berikan Komentar

-