Added a Loading component and added a border to the current image

src/frontend/src/controllers/API/index.ts

@@ -366,7 +366,7 @@ export async function uploadFile(
 }
 
 export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI> {
-  return await api.get(`${BASE_URL_API}files/list/profile_pictures`);
+  return api.get(`${BASE_URL_API}files/list/profile_pictures`);
 }
 
 export async function postCustomComponent(

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts

@@ -1,3 +1,4 @@
+import { reject } from "lodash";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
 
@@ -11,6 +12,7 @@ const useGetProfilePictures = (setErrorData) => {
         title: PROFILE_PICTURES_GET_ERROR_ALERT,
         list: [(error as any)?.response?.data?.detail],
       });
+      throw error;
     }
   };
 

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -7,15 +7,20 @@ import {
   BACKEND_URL,
   BASE_URL_API,
 } from "../../../../../../../../constants/constants";
+import HorizontalScrollFadeComponent from "../../../../../../../../components/horizontalScrollFadeComponent";
+import LoadingComponent from "../../../../../../../../components/loadingComponent";
+import Loading from "../../../../../../../../components/ui/loading";
 
 export default function ProfilePictureChooserComponent({ value, onChange }) {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getProfilePictures = useGetProfilePictures({ setErrorData });
 
   const [profilePictures, setProfilePictures] = useState<string[][]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getProfilePictures().then((data) => {
+    getProfilePictures()
+      .then((data) => {
         if (data) {
           data.forEach((profile_picture) => {
             const [folder, path] = profile_picture.split("/");
@@ -27,19 +32,26 @@ export default function ProfilePictureChooserComponent({ value, onChange }) {
               }
               return prev;
             });
+            setLoading(false);
           });
         }
+      })
+      .catch(() => {
+        setLoading(false);
       });
   });
 
   return (
-    <div className="flex flex-wrap items-center justify-start gap-2">
+    <div className="flex flex-col justify-center gap-2">
-      {profilePictures.map((folder, idx) => (
+      {loading ? (
+        <Loading />
+      ) : (
+        profilePictures.map((folder, idx) => (
           <Label>
             <div className="edit-flow-arrangement">
               <span className="font-medium">{folder}</span>
             </div>
-          <div className="flex flex-wrap items-center justify-start gap-2">
+            <HorizontalScrollFadeComponent>
               {folder.map((path, idx) => (
                 <img
                   key={idx}
@@ -47,13 +59,19 @@ export default function ProfilePictureChooserComponent({ value, onChange }) {
                     0,
                     BACKEND_URL.length - 1,
                   )}${BASE_URL_API}files/images/${folder + "/" + path}`}
-                className="h-12 w-12 rounded-full"
+                  className={
+                    "h-12 w-12 rounded-full" +
+                    (value === folder + "/" + path
+                      ? " border-2 border-white"
+                      : "")
+                  }
                   onClick={() => onChange(folder + "/" + path)}
                 />
               ))}
-          </div>
+            </HorizontalScrollFadeComponent>
           </Label>
-      ))}
+        ))
+      )}
     </div>
   );
 }