Dev

components/Bio.tsx

@@ -27,7 +27,7 @@ export const Bio = () => {
   const t = useTranslations();
 
   if (!user || !user.birth) {
-    return <div>Loading...</div>;
+    return <div> </div>;
   }
 
   const age = calculateAge(user.birth);

components/EducationContainer.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { fetchDataFromBucket } from "@/utils/getBucket";
 import { EducationCard, EducationCardProps } from "./EducationCard";
 import { useLocale, useTranslations } from "next-intl";
+import Loading from "@/app/[locale]/about/(me)/education/loading";
 
 export const EducationContainer = () => {
   const locale = useLocale();
@@ -11,6 +12,7 @@ export const EducationContainer = () => {
   const [certifications, setCertifications] = useState<EducationCardProps[]>(
     []
   );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -23,6 +25,8 @@ export const EducationContainer = () => {
         setEducation(data);
       } catch (error) {
         console.error("Error fetching data:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
     fetchData();
@@ -44,6 +48,9 @@ export const EducationContainer = () => {
     fetchData();
   }, [locale]);
 
+  if (isLoading) {
+    return <Loading />;
+  }
   return (
     <section className="flex flex-col gap-8">
       <h2 className="text-4xl font-semibold text-center">

components/ExperienceContainer.tsx

@@ -3,10 +3,12 @@ import { useEffect, useState } from "react";
 import { ExperienceCard, ExperienceCardProps } from "./ExperienceCard";
 import { fetchDataFromBucket } from "@/utils/getBucket";
 import { useLocale } from "next-intl";
+import Loading from "@/app/[locale]/about/(me)/experience/loading";
 
 export const ExperienceContainer = () => {
   const locale = useLocale();
   const [experience, setExperience] = useState<ExperienceCardProps[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -19,11 +21,16 @@ export const ExperienceContainer = () => {
         setExperience(data);
       } catch (error) {
         console.error("Error fetching data:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
     fetchData();
   }, [experience, locale]);
 
+  if (isLoading) {
+    return <Loading />;
+  }
   return (
     <section className="flex flex-col gap-8">
       {experience.map((xp, index) => (

components/SkillsContainer.tsx

@@ -13,6 +13,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { fetchDataFromBucket } from "@/utils/getBucket";
 import { useLocale, useTranslations } from "next-intl";
+import Loading from "@/app/[locale]/about/(me)/skills/loading";
 
 interface Skill {
   name: string;
@@ -29,6 +30,7 @@ export default function SkillsContainer() {
   const bucketUrl = process.env.NEXT_PUBLIC_S3_BUCKET_URL;
   const [categories, setCategories] = useState<string[]>([]);
   const [skills, setSkills] = useState<Skill[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -60,6 +62,8 @@ export default function SkillsContainer() {
         setSkills(data);
       } catch (error) {
         console.error("Error fetching data:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
     fetchData();
@@ -78,6 +82,10 @@ export default function SkillsContainer() {
     setSelectedCategories([]);
   };
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <div className="container">
       <h1 className="text-3xl font-bold mb-8 text-center">{t("mySkills")}</h1>

components/WorkContainer.tsx

@@ -5,24 +5,36 @@ import { ViewerProps, WorkViewer } from "./WorkViewer";
 import { useLocale } from "next-intl";
 import { SidebarProvider } from "./ui/sidebar";
 import { fetchDataFromBucket } from "@/utils/getBucket";
+import { useLoader } from "@/context/LoaderContext";
+import Loading from "@/app/[locale]/work/loading";
 
 export const WorkContainer = () => {
+  const { showLoader, hideLoader } = useLoader();
   const locale = useLocale();
   const [works, setWorks] = useState<ViewerProps[]>([]);
   const [selectedItem, setSelectedItem] = useState<ViewerProps | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
+      showLoader();
       try {
         const data = await fetchDataFromBucket(locale, "work", "projects");
         setWorks(data);
         setSelectedItem(data[0]);
       } catch (error) {
         console.error("Error fetching data:", error);
+      } finally {
+        hideLoader();
+        setIsLoading(false);
       }
     };
     fetchData();
-  }, [locale]);
+  }, [locale, showLoader, hideLoader]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
 
   return (
     <SidebarProvider>
@@ -41,7 +53,7 @@ export const WorkContainer = () => {
             descriptionTwo={selectedItem?.descriptionTwo ?? ""}
             descriptionThree={selectedItem?.descriptionThree ?? ""}
             imageFull={selectedItem?.imageFull}
-            visitOnGithub={selectedItem?.visitOnGithub ?? ""}
+            visitOnGithub={selectedItem?.visitOnGithub ?? null}
             technos={selectedItem?.technos ?? []}
             language={selectedItem?.language ?? "Unknown language"}
           />