Merge branch 'feat/loading' into 'develop'

update/feature loading content

See merge request !47

src/app/(main)/(home)/components/events/index.tsx

@@ -26,7 +26,7 @@ function Events() {
 
       <div className="flex flex-col md:flex-row gap-5">
         {isLoading ? (
-          <div className="container w-full h-[80vh] flex justify-center items-center">
+          <div className="flex flex-col justify-center items-center w-full min-h-[180px] sm:min-h-[220px] p-3">
             <Spinner />
           </div>
         ) : (

src/app/(main)/(home)/components/featured-news/index.tsx

@@ -7,9 +7,10 @@ import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Autoplay, Grid } from "swiper/modules";
 import BASE_URL from "@/links/index";
+import { Spinner } from "@/components/ui/spinner";
 
 function FeaturedNews() {
-  const { data } = useGetNews<GetNewsResponseType>(
+  const { data, isLoading } = useGetNews<GetNewsResponseType>(
     {
       pageSize: '10',
     }
@@ -26,7 +27,11 @@ function FeaturedNews() {
           <div className="flex-1 h-px bg-linear-to-l from-transparent via-gray-300 to-gray-400"></div>
         </div>
       </div>
-
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-64">
+          <Spinner />
+        </div>
+      ) : (
         <Swiper
           modules={[Autoplay]}
           autoplay={{ delay: 4000, disableOnInteraction: false }}
@@ -61,6 +66,7 @@ function FeaturedNews() {
             </SwiperSlide>
           ))}
         </Swiper>
+      )}
     </section>
   );
 }

src/app/(main)/(home)/components/news/index.tsx

@@ -7,12 +7,13 @@ import { ChevronsRight } from "lucide-react";
 import { useState } from "react";
 import stripImagesAndHtml from "@/helpers/stripImageAndHtml";
 import CardNews from "./components/card-news";
+import { Spinner } from "@/components/ui/spinner";
 
 const News = () => {
   const [tab, setTab] = useState("all");
 
-  const { data: newsSpecial } = useGetNews<GetNewsResponseType>({ pageSize: '1' });
-  const { data: newsFilters } = useGetNews<GetNewsResponseType>(
+  const { data: newsSpecial, isLoading: isLoadingSpecial } = useGetNews<GetNewsResponseType>({ pageSize: '1' });
+  const { data: newsFilters, isLoading: isLoadingFilters } = useGetNews<GetNewsResponseType>(
     {
       pageSize: '5',
       filters: tab === "all" ? `` : `page_config.code @=${tab}`,
@@ -38,7 +39,12 @@ const News = () => {
       <hr className="border-[#063e8e] mb-4" />
 
       <div className="flex flex-col md:flex-row gap-5">
-        {newsSpecial?.responseData.rows
+        {isLoadingSpecial ? (
+          <div className="flex justify-center items-center flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3">
+            <Spinner />
+          </div>
+        ) : (
+          newsSpecial?.responseData.rows
             .slice(0, 1)
             .map((news: NewsItem) => (
               <Link
@@ -64,8 +70,8 @@ const News = () => {
                   <p className="line-clamp-4 text-justify">{stripImagesAndHtml(news.description)}</p>
                 </div>
               </Link>
-          ))}
-
+            ))
+        )}
         <div className="w-full md:w-1/2">
           <div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
             <button
@@ -105,9 +111,15 @@ const News = () => {
             </button>
           </div>
 
-          {newsFilters?.responseData?.rows.slice(0, 4).map((news) => (
+          {isLoadingFilters ? (
+            <div className="flex justify-center py-10">
+              <Spinner />
+            </div>
+          ) : (
+            newsFilters?.responseData?.rows.slice(0, 4).map((news) => (
               <CardNews key={news.id} news={news} />
-          ))}
+            ))
+          )}
         </div>
       </div>
     </div>

src/components/shared/image-next/index.tsx

 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-const ImageNext = ({ src, alt, width, height, className, onError }: any) => {
+const ImageNext = ({ src, alt, width, height, className, fallback = "/img-error.png" }: any) => {
   const [imgSrc, setImgSrc] = useState(src);
 
+  useEffect(() => {
+    setImgSrc(src);
+  }, [src]);
+
   return (
     <Image
       src={imgSrc}
@@ -11,7 +15,8 @@ const ImageNext = ({ src, alt, width, height, className, onError }: any) => {
       width={width}
       height={height}
       className={className}
-      onError={() => setImgSrc(onError || "/img-error.png")}
+      onError={() => setImgSrc(fallback)}
+      unoptimized
     />
   );
 };