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,41 +27,46 @@ function FeaturedNews() {
           <div className="flex-1 h-px bg-linear-to-l from-transparent via-gray-300 to-gray-400"></div>
         </div>
       </div>
-
-      <Swiper
-        modules={[Autoplay]}
-        autoplay={{ delay: 4000, disableOnInteraction: false }}
-        loop
-        breakpoints={{
-          0: { slidesPerView: 1.1, spaceBetween: 10 },
-          640: { slidesPerView: 2, spaceBetween: 16 },
-          1024: { slidesPerView: 3, spaceBetween: 24 },
-        }}
-        className="pb-5"
-      >
-        {data?.responseData?.rows.map((news) => (
-          <SwiperSlide key={news.id}>
-            <Link
-              href={`${news.external_link}`}
-              className="relative block bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
-            >
-              <ImageNext
-                src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
-                alt={news.title}
-                width={600}
-                height={400}
-                sizes="(max-width:640px) 100vw,(max-width:1024px) 50vw,33vw"
-                className="w-full aspect-3/2 sm:h-56 md:h-64 object-cover"
-              />
-              <div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
-                <p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
-                  {news.title}
-                </p>
-              </div>
-            </Link>
-          </SwiperSlide>
-        ))}
-      </Swiper>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-64">
+          <Spinner />
+        </div>
+      ) : (
+        <Swiper
+          modules={[Autoplay]}
+          autoplay={{ delay: 4000, disableOnInteraction: false }}
+          loop
+          breakpoints={{
+            0: { slidesPerView: 1.1, spaceBetween: 10 },
+            640: { slidesPerView: 2, spaceBetween: 16 },
+            1024: { slidesPerView: 3, spaceBetween: 24 },
+          }}
+          className="pb-5"
+        >
+          {data?.responseData?.rows.map((news) => (
+            <SwiperSlide key={news.id}>
+              <Link
+                href={`${news.external_link}`}
+                className="relative block bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
+              >
+                <ImageNext
+                  src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
+                  alt={news.title}
+                  width={600}
+                  height={400}
+                  sizes="(max-width:640px) 100vw,(max-width:1024px) 50vw,33vw"
+                  className="w-full aspect-3/2 sm:h-56 md:h-64 object-cover"
+                />
+                <div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
+                  <p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
+                    {news.title}
+                  </p>
+                </div>
+              </Link>
+            </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,34 +39,39 @@ const News = () => {
       <hr className="border-[#063e8e] mb-4" />
 
       <div className="flex flex-col md:flex-row gap-5">
-        {newsSpecial?.responseData.rows
-          .slice(0, 1)
-          .map((news: NewsItem) => (
-            <Link
-              key={news.id}
-              href={`${news.external_link}`}
-              className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 bg-white"
-            >
-              <div className="w-full aspect-3/2 overflow-hidden">
-                <ImageNext
-                  src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
-                  alt={news.title}
-                  width={600}
-                  height={400}
-                  sizes="(max-width:768px) 100vw,50vw"
-                  className="w-full h-full object-cover"
-                />
-              </div>
-
-              <div className="flex-1 p-5 pt-1">
-                <p className="text-[#063E8E] font-bold pb-2 text-xl line-clamp-2">
-                  {news.title}
-                </p>
-                <p className="line-clamp-4 text-justify">{stripImagesAndHtml(news.description)}</p>
-              </div>
-            </Link>
-          ))}
+        {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
+                key={news.id}
+                href={`${news.external_link}`}
+                className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 bg-white"
+              >
+                <div className="w-full aspect-3/2 overflow-hidden">
+                  <ImageNext
+                    src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
+                    alt={news.title}
+                    width={600}
+                    height={400}
+                    sizes="(max-width:768px) 100vw,50vw"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
 
+                <div className="flex-1 p-5 pt-1">
+                  <p className="text-[#063E8E] font-bold pb-2 text-xl line-clamp-2">
+                    {news.title}
+                  </p>
+                  <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) => (
-            <CardNews key={news.id} news={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
     />
   );
 };