From c013f645f1d52af67972e5f178de4b0f87112304 Mon Sep 17 00:00:00 2001
From: YavizGuldalf <yagiz.guldal@outlook.com>
Date: Mon, 16 Dec 2024 13:51:35 +0300
Subject: [PATCH 1/3] feat(mobile): add onPress to pressable text

---
 mobile/bulingo/app/pressableText.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/mobile/bulingo/app/pressableText.tsx b/mobile/bulingo/app/pressableText.tsx
index f2e41be4..63233660 100644
--- a/mobile/bulingo/app/pressableText.tsx
+++ b/mobile/bulingo/app/pressableText.tsx
@@ -6,6 +6,7 @@ type PressableTextProps = {
   text: string,
   style?: StyleProp<TextStyle>
   containerStyle?: StyleProp<ViewStyle>
+  onPress?: (word: string) => void
 };
 
 export default function PressableText(props: PressableTextProps){
@@ -35,6 +36,7 @@ export default function PressableText(props: PressableTextProps){
         <Pressable
           key={index}
           onLongPress={() => handleLongPress(word)}
+          onPress={() => {props.onPress && props.onPress(word)}}
           // style={}
         >
             <Text style={props.style}>

From 685c85d1b7035e7d81c13303b1892ad9b13cc35c Mon Sep 17 00:00:00 2001
From: Elifnurdeniz <elfnrdeniz@gmail.com>
Date: Mon, 16 Dec 2024 14:04:03 +0300
Subject: [PATCH 2/3] feat(frontend): added a quiz details skeleton and used
 skeletons in places where missing

---
 .../components/quiz/quiz-details-skeleton.tsx |  23 ++
 frontend/src/pages/post.tsx                   |   2 +-
 frontend/src/pages/profile.tsx                |  80 ++---
 frontend/src/pages/quiz-details.tsx           | 280 +++++++++---------
 frontend/src/pages/quiz.tsx                   |  98 +++---
 5 files changed, 260 insertions(+), 223 deletions(-)
 create mode 100644 frontend/src/components/quiz/quiz-details-skeleton.tsx

diff --git a/frontend/src/components/quiz/quiz-details-skeleton.tsx b/frontend/src/components/quiz/quiz-details-skeleton.tsx
new file mode 100644
index 00000000..b5e53c14
--- /dev/null
+++ b/frontend/src/components/quiz/quiz-details-skeleton.tsx
@@ -0,0 +1,23 @@
+import { Card, Skeleton } from "@nextui-org/react";
+
+export default function QuizDetailsCardSkeleton() {
+  return (
+    <Card className="w-[740px] h-[450px] space-y-5 p-4" radius="lg" data-testid="quiz-card-skeleton">
+      <div>
+        <Skeleton className="flex rounded-full w-12 h-12" />
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <Skeleton className="h-3 w-3/5 rounded-lg" />
+        <Skeleton className="h-3 w-4/5 rounded-lg" />
+      </div>
+      <Skeleton className="rounded-lg">
+        <div className="h-24 rounded-lg bg-default-300"></div>
+      </Skeleton>
+      <div className="space-y-3">
+        <Skeleton className="w-3/5 rounded-lg">
+          <div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
+        </Skeleton>
+      </div>
+    </Card>
+  );
+}
diff --git a/frontend/src/pages/post.tsx b/frontend/src/pages/post.tsx
index dca5c0b9..975f9590 100644
--- a/frontend/src/pages/post.tsx
+++ b/frontend/src/pages/post.tsx
@@ -199,7 +199,7 @@ export default function Post() {
             </div>
           </Card>
         </div>
-        <Card className="w-[740px] p-4">
+        <Card className="w-[740px] p-4 mb-1">
           <div className="flex flex-col gap-2">
             <Textarea
               placeholder="Write a comment..."
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
index 969a3d5c..841845cb 100644
--- a/frontend/src/pages/profile.tsx
+++ b/frontend/src/pages/profile.tsx
@@ -388,9 +388,8 @@ export default function Profile() {
               </div>
             </div>
             <div
-              className={`flex flex-row ${
-                profile.username === Cookies.get("username") ? "pl-32" : "pl-0"
-              } gap-6 items-center`}
+              className={`flex flex-row ${profile.username === Cookies.get("username") ? "pl-32" : "pl-0"
+                } gap-6 items-center`}
             >
               {profile.username !== Cookies.get("username") && (
                 <Button
@@ -399,9 +398,8 @@ export default function Profile() {
                   onClick={
                     isGuest ? () => setGuestModalOpen(true) : toggleFollow
                   }
-                  className={`border-2 rounded-lg min-w-36 font-bold px-8 py-6 ${
-                    isFollowing ? "text-blue-900" : ""
-                  }`}
+                  className={`border-2 rounded-lg min-w-36 font-bold px-8 py-6 ${isFollowing ? "text-blue-900" : ""
+                    }`}
                 >
                   {isFollowing ? "Unfollow" : "Follow"}
                 </Button>
@@ -486,11 +484,10 @@ export default function Profile() {
                 isOpen={isOpen}
                 onOpenChange={onOpenChange}
                 placement="top-center"
-                className={`${
-                  type === "quiz" || type === "post" || type === "comment"
+                className={`${type === "quiz" || type === "post" || type === "comment"
                     ? "max-w-[760px]"
                     : "max-w-[360px]"
-                } flex flex-col items-center max-h-[80vh] overflow-y-auto`}
+                  } flex flex-col items-center max-h-[80vh] overflow-y-auto`}
                 backdrop="blur"
               >
                 <ModalContent className="pb-6 gap-3">
@@ -498,12 +495,12 @@ export default function Profile() {
                     {type === "follower"
                       ? "Followers"
                       : type === "following"
-                      ? "Following"
-                      : type === "post"
-                      ? "Liked Posts"
-                      : type === "quiz"
-                      ? "Liked Quizzes"
-                      : "Liked Comments"}
+                        ? "Following"
+                        : type === "post"
+                          ? "Liked Posts"
+                          : type === "quiz"
+                            ? "Liked Quizzes"
+                            : "Liked Comments"}
                   </ModalHeader>
                   {type === "quiz" ? (
                     likedQuizzes.length > 0 ? (
@@ -570,7 +567,7 @@ export default function Profile() {
                     )
                   ) : (type === "follower" || type === "following") &&
                     (type === "follower" ? followers : followings).length >
-                      0 ? (
+                    0 ? (
                     (type === "follower" ? followers : followings).map(
                       (user) => (
                         <div
@@ -612,29 +609,36 @@ export default function Profile() {
               </div>
             }
           >
-            {profile && (
-              <div className="flex flex-col p-5 items-center">
-                <div className="flex flex-col gap-4 items-center">
-                  {profile &&
-                    sortedPosts.map((post) => {
-                      return (
-                        <Suspense key={post.id} fallback={<PostCardSkeleton />}>
-                          <PostCard
-                            id={post.id}
-                            username={profile.username}
-                            title={post.post.title}
-                            content={post.post.content}
-                            timePassed={post.post.timestamp}
-                            likeCount={post.engagement.likes}
-                            tags={post.post.tags}
-                            initialIsLiked={post.engagement.is_liked}
-                            initialIsBookmarked={post.engagement.is_bookmarked}
-                          />
-                        </Suspense>
-                      );
-                    })}
-                </div>
+            {isLoading ? (
+              <div className="flex flex-col p-5 gap-4 items-center">
+                {Array(2)
+                  .fill(0)
+                  .map((_, index) => (
+                    <PostCardSkeleton key={index} />
+                  ))}
               </div>
+            ) : (
+              profile && (
+                <div className="flex flex-col p-5 items-center">
+                  <div className="flex flex-col gap-4 items-center">
+                    {sortedPosts.map((post) => (
+                      <Suspense key={post.id} fallback={<PostCardSkeleton />}>
+                        <PostCard
+                          id={post.id}
+                          username={profile.username}
+                          title={post.post.title}
+                          content={post.post.content}
+                          timePassed={post.post.timestamp}
+                          likeCount={post.engagement.likes}
+                          tags={post.post.tags}
+                          initialIsLiked={post.engagement.is_liked}
+                          initialIsBookmarked={post.engagement.is_bookmarked}
+                        />
+                      </Suspense>
+                    ))}
+                  </div>
+                </div>
+              )
             )}
           </Tab>
           <Tab
diff --git a/frontend/src/pages/quiz-details.tsx b/frontend/src/pages/quiz-details.tsx
index 94a17b63..22b96d89 100644
--- a/frontend/src/pages/quiz-details.tsx
+++ b/frontend/src/pages/quiz-details.tsx
@@ -27,6 +27,7 @@ import { AuthActions } from "../components/auth/utils.tsx";
 import { convertQuizDetailsResponseToQuizDetails } from "../components/common/utils.tsx";
 import { QuizDetail } from "../types.ts";
 import { UserCard } from "../components/common/user-card.tsx";
+import QuizDetailsCardSkeleton from "../components/quiz/quiz-details-skeleton.tsx";
 
 const quiz = {
     picture: "https://nextui.org/avatars/avatar-1.png",
@@ -50,7 +51,7 @@ export default function QuizDetails() {
             setIsLoading(true);
             const headers = {
                 ...(token && { Authorization: `Bearer ${token}` }),
-              };
+            };
             axios
                 .get(`${BASE_URL}/quiz/${quizID}/`, {
                     headers
@@ -121,151 +122,154 @@ export default function QuizDetails() {
     return (
         <div className="h-screen w-screen items-center gap-2 flex flex-col">
             <Navbar />
-
-            <Card className="max-w-[600px] items-center">
-                <CardHeader className="flex flex-col items-start gap-2">
-                    <div className="flex w-full justify-between items-center px-1">
-                        <div className="flex items-center gap-3 my-2">
-                            <Popover showArrow placement="bottom">
-                                <PopoverTrigger>
-                                    <div className="flex flex-row gap-3 items-center">
-                                        <Avatar
-                                            as="button"
-                                            isBordered
-                                            radius="full"
-                                            className="w-6 h-6 text-tiny"
-                                            src="https://nextui.org/avatars/avatar-1.png"
-                                        />
-                                        <div className="flex flex-col gap-1 items-start justify-center">
-                                            <h5 className="text-small tracking-tight text-default-400">
-                                                {quizData?.author.username}
-                                            </h5>
+            {isLoading
+                ? <QuizDetailsCardSkeleton />
+                : (
+                    <Card className="max-w-[600px] items-center">
+                        <CardHeader className="flex flex-col items-start gap-2">
+                            <div className="flex w-full justify-between items-center px-1">
+                                <div className="flex items-center gap-3 my-2">
+                                    <Popover showArrow placement="bottom">
+                                        <PopoverTrigger>
+                                            <div className="flex flex-row gap-3 items-center">
+                                                <Avatar
+                                                    as="button"
+                                                    isBordered
+                                                    radius="full"
+                                                    className="w-6 h-6 text-tiny"
+                                                    src="https://nextui.org/avatars/avatar-1.png"
+                                                />
+                                                <div className="flex flex-col gap-1 items-start justify-center">
+                                                    <h5 className="text-small tracking-tight text-default-400">
+                                                        {quizData?.author.username}
+                                                    </h5>
+                                                </div>
+                                            </div>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="p-1">
+                                            <UserCard username={quizData?.author.username || ""} />
+                                        </PopoverContent>
+                                    </Popover>
+                                </div>
+                                <p className="text-default-400 items-center text-small">{quizData?.timestamp}</p>
+                            </div>
+                            <Divider className="mt-1.5 bg-zinc-200" />
+                        </CardHeader>
+                        <CardBody className="flex flex-col justify-start rounded-lg shadow-zinc-200 w-[550px] h-[300px] overflow-hidden mb-2">
+                            <div className="flex flex-row justify-between w-full mx-2 mb-4">
+                                <h2 className="text-3xl font-semibold leading-none text-default-900">
+                                    {quizData?.title}
+                                </h2>
+                            </div>
+                            <div className="flex flex-col justify-center mx-3">
+                                <div className="flex flex-row justify-between">
+                                    <div >
+                                        <p className="w-full items-center text-lg mb-4">{quizData?.description}</p>
+                                        <div className="flex flex-col justify-center gap-1 my-4">
+                                            <p>Attempts: {quizData?.times_taken}</p>
+                                            <p>Question Count: {quizData?.question_count}</p>
+                                            <p>Average Score: {quizData?.average_score}</p>
                                         </div>
                                     </div>
-                                </PopoverTrigger>
-                                <PopoverContent className="p-1">
-                                    <UserCard username={quizData?.author.username || ""} />
-                                </PopoverContent>
-                            </Popover>
-                        </div>
-                        <p className="text-default-400 items-center text-small">{quizData?.timestamp}</p>
-                    </div>
-                    <Divider className="mt-1.5 bg-zinc-200" />
-                </CardHeader>
-                <CardBody className="flex flex-col justify-start rounded-lg shadow-zinc-200 w-[550px] h-[300px] overflow-hidden mb-2">
-                    <div className="flex flex-row justify-between w-full mx-2 mb-4">
-                        <h2 className="text-3xl font-semibold leading-none text-default-900">
-                            {quizData?.title}
-                        </h2>
-                    </div>
-                    <div className="flex flex-col justify-center mx-3">
-                        <div className="flex flex-row justify-between">
-                            <div >
-                                <p className="w-full items-center text-lg mb-4">{quizData?.description}</p>
-                                <div className="flex flex-col justify-center gap-1 my-4">
-                                    <p>Attempts: {quizData?.times_taken}</p>
-                                    <p>Question Count: {quizData?.question_count}</p>
-                                    <p>Average Score: {quizData?.average_score}</p>
+                                    {quiz.picture ? (
+                                        <img
+                                            src={quiz.picture}
+                                            alt="quiz"
+                                            style={{
+                                                width: "170px",
+                                                height: "170px",
+                                                objectFit: "cover",
+                                                objectPosition: "center",
+                                            }}
+                                        />
+                                    ) : (
+                                        <div
+                                            style={{
+                                                width: "200px",
+                                                height: "200px",
+                                                display: "flex",
+                                                justifyContent: "center",
+                                                alignItems: "center",
+                                                backgroundColor: "#f0f0f0", // Light gray background for the fallback
+                                                borderRadius: "8px",
+                                            }}
+                                        >
+                                            <IconPhotoOff style={{ width: '70%', height: '70%', position: 'center', top: '50%', left: '50%' }} stroke={1.5} color="gray" />
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="w-full flex flex-row justify-start gap-3 items-center">
+                                    <Button color="primary" variant="solid" onClick={() => navigate(`/quiz/${quizData?.id}`)}
+                                        className="w-1/3 items-center text-center mt-3">
+                                        Start Quiz
+                                    </Button>
+                                    {hasAttempted && (
+                                        <Button color="primary" variant="faded" onClick={() => navigate(`/quiz/${quizData?.id}`)} className="w-1/4 items-center text-center mt-3">
+                                            Resume Quiz
+                                        </Button>
+                                    )}
                                 </div>
                             </div>
-                            {quiz.picture ? (
-                                <img
-                                    src={quiz.picture}
-                                    alt="quiz"
-                                    style={{
-                                        width: "170px",
-                                        height: "170px",
-                                        objectFit: "cover",
-                                        objectPosition: "center",
-                                    }}
-                                />
-                            ) : (
-                                <div
-                                    style={{
-                                        width: "200px",
-                                        height: "200px",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        backgroundColor: "#f0f0f0", // Light gray background for the fallback
-                                        borderRadius: "8px",
-                                    }}
-                                >
-                                    <IconPhotoOff style={{ width: '70%', height: '70%', position: 'center', top: '50%', left: '50%' }} stroke={1.5} color="gray" />
+                        </CardBody>
+                        <Divider className="bg-zinc-200" />
+                        <CardFooter className="flex justify-between gap-2">
+                            <div className="flex gap-0 items-center">
+                                <div className="flex justify-between items-center">
+                                    <p
+                                        className={cn("font-semibold text-default-500", {
+                                            "font-semibold text-red-500": isLiked,
+                                        })}
+                                    >
+                                        {quizData?.like_count}
+                                    </p>
+                                    <Button
+                                        isIconOnly
+                                        color="danger"
+                                        aria-label="Like"
+                                        onClick={toggleLike}
+                                        variant="light"
+                                        className="flex items-center gap-3"
+                                    >
+                                        {isLiked ? (
+                                            <IconThumbUpFilled size={20} stroke={1.5} />
+                                        ) : (
+                                            <IconThumbUp size={20} stroke={1.5} />
+                                        )}
+                                    </Button>
                                 </div>
-                            )}
-                        </div>
-
-                        <div className="w-full flex flex-row justify-start gap-3 items-center">
-                            <Button color="primary" variant="solid" onClick={() => navigate(`/quiz/${quizData?.id}`)}
-                                className="w-1/3 items-center text-center mt-3">
-                                Start Quiz
-                            </Button>
-                            {hasAttempted && (
-                                <Button color="primary" variant="faded" onClick={() => navigate(`/quiz/${quizData?.id}`)} className="w-1/4 items-center text-center mt-3">
-                                    Resume Quiz
-                                </Button>
-                            )}
-                        </div>
-                    </div>
-                </CardBody>
-                <Divider className="bg-zinc-200" />
-                <CardFooter className="flex justify-between gap-2">
-                    <div className="flex gap-0 items-center">
-                        <div className="flex justify-between items-center">
-                            <p
-                                className={cn("font-semibold text-default-500", {
-                                    "font-semibold text-red-500": isLiked,
-                                })}
-                            >
-                                {quizData?.like_count}
-                            </p>
-                            <Button
-                                isIconOnly
-                                color="danger"
-                                aria-label="Like"
-                                onClick={toggleLike}
-                                variant="light"
-                                className="flex items-center gap-3"
-                            >
-                                {isLiked ? (
-                                    <IconThumbUpFilled size={20} stroke={1.5} />
-                                ) : (
-                                    <IconThumbUp size={20} stroke={1.5} />
-                                )}
-                            </Button>
-                        </div>
-                        <Button
-                            isIconOnly
-                            color="secondary"
-                            aria-label="Bookmark"
-                            onClick={toggleBookmark}
-                            variant="light"
-                        >
-                            {isBookmarked ? (
-                                <IconBookmarkFilled size={20} stroke={1.5} />
-                            ) : (
-                                <IconBookmark size={20} stroke={1.5} />
-                            )}
-                        </Button>
-                    </div>
-                    <div className="flex gap-2">
-                        {quizData?.tags &&
-                            quizData?.tags.map((tag) => (
                                 <Button
-                                    key={tag}
-                                    color="primary"
-                                    variant="flat"
-                                    className="text-sm h-8"
-                                    size="sm"
-                                    radius="full"
+                                    isIconOnly
+                                    color="secondary"
+                                    aria-label="Bookmark"
+                                    onClick={toggleBookmark}
+                                    variant="light"
                                 >
-                                    #{tag}
+                                    {isBookmarked ? (
+                                        <IconBookmarkFilled size={20} stroke={1.5} />
+                                    ) : (
+                                        <IconBookmark size={20} stroke={1.5} />
+                                    )}
                                 </Button>
-                            ))}
-                    </div>
-                </CardFooter>
-            </Card>
+                            </div>
+                            <div className="flex gap-2">
+                                {quizData?.tags &&
+                                    quizData?.tags.map((tag) => (
+                                        <Button
+                                            key={tag}
+                                            color="primary"
+                                            variant="flat"
+                                            className="text-sm h-8"
+                                            size="sm"
+                                            radius="full"
+                                        >
+                                            #{tag}
+                                        </Button>
+                                    ))}
+                            </div>
+                        </CardFooter>
+                    </Card>
+                )}
         </div>
     );
 }
diff --git a/frontend/src/pages/quiz.tsx b/frontend/src/pages/quiz.tsx
index 7847739f..c97241c8 100644
--- a/frontend/src/pages/quiz.tsx
+++ b/frontend/src/pages/quiz.tsx
@@ -8,6 +8,7 @@ import { usePageTitle } from "../components/common/usePageTitle.ts";
 import { BASE_URL } from "../lib/baseURL.ts";
 import axios from "axios";
 import { AuthActions } from "../components/auth/utils.tsx";
+import QuizDetailsCardSkeleton from "../components/quiz/quiz-details-skeleton.tsx";
 
 enum Answer {
   None,
@@ -91,53 +92,58 @@ export default function Quiz() {
                 />
               </div>
             )}
-            <div className="flex flex-col items-center py-4">
-              <h1 className="font-semibold text-4xl mt-3 mb-4 text-blue-900">
-                {quizData?.quiz_title}
-              </h1>
-              <QuestionCard
-                quiz_progress_id={quizData?.quiz_progress_id}
-                ques_count={quizData?.question_count}
-                answers={answers}
-                setAnswers={setAnswers}
-                cur_question={currentPage}
-                option_a={currentQuestion?.choices[0]}
-                option_b={currentQuestion?.choices[1]}
-                option_c={currentQuestion?.choices[2]}
-                option_d={currentQuestion?.choices[3]}
-                question={currentQuestion?.question}
-              />
-              <div className="flex justify-center items-center gap-24 mt-4 my-1">
-                <Button
-                  size="lg"
-                  variant="flat"
-                  color="primary"
-                  {...(currentPage === 1 && { disabled: true })}
-                  onPress={() =>
-                    setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
-                  }
-                  className="w-32"
-                >
-                  Previous
-                </Button>
-                <Button
-                  size="lg"
-                  variant="flat"
-                  color="primary"
-                  {...(currentPage === quizData?.question_count && {
-                    disabled: true,
-                  })}
-                  onPress={() =>
-                    setCurrentPage((prev) =>
-                      prev < quizData?.question_count ? prev + 1 : prev
-                    )
-                  }
-                  className="w-32"
-                >
-                  Next
-                </Button>
+            {isLoading ? (
+              <div className="mt-5"><QuizDetailsCardSkeleton /></div>
+              
+            ) : (
+              <div className="flex flex-col items-center py-4">
+                <h1 className="font-semibold text-4xl mt-3 mb-4 text-blue-900">
+                  {quizData?.quiz_title}
+                </h1>
+                <QuestionCard
+                  quiz_progress_id={quizData?.quiz_progress_id}
+                  ques_count={quizData?.question_count}
+                  answers={answers}
+                  setAnswers={setAnswers}
+                  cur_question={currentPage}
+                  option_a={currentQuestion?.choices[0]}
+                  option_b={currentQuestion?.choices[1]}
+                  option_c={currentQuestion?.choices[2]}
+                  option_d={currentQuestion?.choices[3]}
+                  question={currentQuestion?.question}
+                />
+                <div className="flex justify-center items-center gap-24 mt-4 my-1">
+                  <Button
+                    size="lg"
+                    variant="flat"
+                    color="primary"
+                    {...(currentPage === 1 && { disabled: true })}
+                    onPress={() =>
+                      setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))
+                    }
+                    className="w-32"
+                  >
+                    Previous
+                  </Button>
+                  <Button
+                    size="lg"
+                    variant="flat"
+                    color="primary"
+                    {...(currentPage === quizData?.question_count && {
+                      disabled: true,
+                    })}
+                    onPress={() =>
+                      setCurrentPage((prev) =>
+                        prev < quizData?.question_count ? prev + 1 : prev
+                      )
+                    }
+                    className="w-32"
+                  >
+                    Next
+                  </Button>
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       </SidebarLayout>

From c7a951d0ea9c2e0ad2b3f03c3530d36f0ba0aaef Mon Sep 17 00:00:00 2001
From: Elifnurdeniz <elfnrdeniz@gmail.com>
Date: Mon, 16 Dec 2024 14:44:13 +0300
Subject: [PATCH 3/3] feat(frontend): added skeleton to edit profile page

---
 frontend/src/pages/profile-update.tsx | 123 +++++++++++++++-----------
 1 file changed, 73 insertions(+), 50 deletions(-)

diff --git a/frontend/src/pages/profile-update.tsx b/frontend/src/pages/profile-update.tsx
index 0d161f6a..02009ade 100644
--- a/frontend/src/pages/profile-update.tsx
+++ b/frontend/src/pages/profile-update.tsx
@@ -7,7 +7,7 @@ import { AuthActions } from "../components/auth/utils.tsx";
 import { convertProfileResponseToProfile } from "../components/common/utils.tsx";
 import Cookies from "js-cookie";
 import { ProfileResponse } from "../types.ts";
-import { Select, SelectItem } from "@nextui-org/react";
+import { Select, SelectItem, Skeleton } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
 import { usePageTitle } from "../components/common/usePageTitle.ts";
 
@@ -19,6 +19,7 @@ export default function EditProfile() {
   const navigate = useNavigate();
   const [file, setFile] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
 
   const [formData, setFormData] = useState({
@@ -38,6 +39,7 @@ export default function EditProfile() {
 
   // Fetch Profile Data
   useEffect(() => {
+    setIsLoading(true);
     axios
       .get(`${BASE_URL}/profile/${Cookies.get("username")}/`, {
         headers: {
@@ -55,11 +57,12 @@ export default function EditProfile() {
           bio: profile.bio || "Hey, new learner here!",
           avatar: profile.image || "https://nextui.org/avatars/avatar-1.png",
         });
-
         setPreview(profile.image || null);
       })
       .catch((error) => {
         console.log(error);
+      }).finally(() => {
+        setIsLoading(false);
       });
   }, [token]);
 
@@ -111,43 +114,55 @@ export default function EditProfile() {
         {/* Avatar */}
         <div className="flex flex-col items-center">
           {/* Avatar Display */}
-          <Avatar
-            src={preview || formData.avatar} // Show preview if a file is selected, else show the current avatar
-            className="w-32 h-32 mb-4"
-          />
-
+          {isLoading ? (
+            <Skeleton className="flex rounded-full w-32 h-32 mb-4" />
+          )
+            :
+            (
+              <Avatar
+                src={preview || formData.avatar} // Show preview if a file is selected, else show the current avatar
+                className="w-32 h-32 mb-4"
+              />
+            )
+          }
           {/* Change Avatar Button */}
-          <label className="relative cursor-pointer">
-            <div className={`bg-default-100 hover:bg-default-200 flex flex-col justify-center items-center rounded-3xl w-[120px] h-[40px] overflow-hidden`}>
-              <span className="text-primary text-sm font-bold">Change Avatar</span>
-            </div>
-            {/* File Input */}
-            <input
-              type="file"
-              className="hidden"
-              onChange={handleFileChange} // Handle file selection
-              accept="image/*"
-            />
-          </label>
+          {isLoading ? (
+            <Skeleton className="w-40 h-10 rounded-lg" />
+          ) : (
+            <label className="relative cursor-pointer">
+              <div className={`bg-default-100 hover:bg-default-200 flex flex-col justify-center items-center rounded-3xl w-[120px] h-[40px] overflow-hidden`}>
+                <span className="text-primary text-sm font-bold">Change Avatar</span>
+              </div>
+              {/* File Input */}
+              <input
+                type="file"
+                className="hidden"
+                onChange={handleFileChange} // Handle file selection
+                accept="image/*"
+              />
+            </label>
+          )}
         </div>
-
-
         <form className="flex flex-col gap-6 w-full max-w-lg">
           {/* Bio Field */}
           <div className="flex flex-col items-start">
             <label htmlFor="bio" className="text-gray-600 font-semibold mb-1">
               Bio
             </label>
-            <Textarea
-              id="bio"
-              data-testid="bio-input"
-              name="bio"
-              value={formData.bio}
-              onChange={handleInputChange}
-              defaultValue={formData.bio}
-              maxLength={75}
-              className="w-full mb-1"
-            />
+            {isLoading ? (
+              <Skeleton className="h-20 w-full rounded-lg" />
+            ) : (
+              <Textarea
+                id="bio"
+                data-testid="bio-input"
+                name="bio"
+                value={formData.bio}
+                onChange={handleInputChange}
+                defaultValue={formData.bio}
+                maxLength={75}
+                className="w-full mb-1"
+              />
+            )}
             <p className="text-gray-400 text-sm pl-1">
               {75 - formData.bio.length} characters remaining
             </p>
@@ -158,31 +173,39 @@ export default function EditProfile() {
             <label htmlFor="level" className="text-gray-600 font-semibold mb-1">
               Level
             </label>
-            <Select
-              data-testid="level-select"
-              selectedKeys={new Set([formData.level])} // Use `selectedKeys` with a Set for controlled component
-              onSelectionChange={(keys) => handleLevelChange([...keys][0])} // Convert the Set to an array and get the first value
-              className="w-full mb-1"
-            >
-              {tags.map((tag) => (
-                <SelectItem key={tag} data-testid={`level-option-${tag}`}>{tag}</SelectItem>
-              ))}
-            </Select>
+            {isLoading ? (
+              <Skeleton className="h-10 w-full rounded-lg" />
+            ) : (
+              <Select
+                data-testid="level-select"
+                selectedKeys={new Set([formData.level])} // Use `selectedKeys` with a Set for controlled component
+                onSelectionChange={(keys) => handleLevelChange([...keys][0])} // Convert the Set to an array and get the first value
+                className="w-full mb-1"
+              >
+                {tags.map((tag) => (
+                  <SelectItem key={tag} data-testid={`level-option-${tag}`}>{tag}</SelectItem>
+                ))}
+              </Select>
+            )}
             <p className="text-gray-400 text-sm pl-1">Enter your level</p>
           </div>
           <Divider className="mt-2 w-full border-t-4 rounded-2xl border-gray-400" />
 
           {/* Submit Button */}
           <div className="flex justify-center">
-            <Button
-              onClick={handleSubmit}
-              data-testid="submit-button"
-              variant="solid"
-              color="primary"
-              className="px-8 py-1 font-bold rounded-lg"
-            >
-              Save Changes
-            </Button>
+            {isLoading ? (
+              <Skeleton className="w-40 h-10 rounded-lg" />
+            ) : (
+              <Button
+                onClick={handleSubmit}
+                data-testid="submit-button"
+                variant="solid"
+                color="primary"
+                className="px-8 py-1 font-bold rounded-lg"
+              >
+                Save Changes
+              </Button>
+            )}
           </div>
         </form>
       </div>