feat(frontend): add a loader when processing files (QuivrHQ#2903)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/studio/[brainId]/page.module.scss

@@ -1,4 +1,4 @@
-@use "Spacings.module.scss";
+@use "styles/Spacings.module.scss";
 
 .brain_management_wrapper {
   width: 100%;

frontend/lib/components/CurrentBrain/CurrentBrain.module.scss

@@ -47,6 +47,15 @@
           @include textColor(text-3);
           @include Typography.EllipsisOverflow;
         }
+
+        .warning {
+          color: var(--warning);
+          display: flex;
+          align-items: center;
+          gap: Spacings.$spacing02;
+          margin-left: Spacings.$spacing02;
+          font-size: Typography.$tiny;
+        }
       }
     }
   }

frontend/lib/components/CurrentBrain/CurrentBrain.tsx

@@ -1,8 +1,10 @@
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+import { useNotificationsContext } from "@/lib/context/NotificationsProvider/hooks/useNotificationsContext";
 
 import styles from "./CurrentBrain.module.scss";
 
 import { Icon } from "../ui/Icon/Icon";
+import { LoaderIcon } from "../ui/LoaderIcon/LoaderIcon";
 
 interface CurrentBrainProps {
   allowingRemoveBrain: boolean;
@@ -17,6 +19,7 @@ export const CurrentBrain = ({
   const removeCurrentBrain = (): void => {
     setCurrentBrainId(null);
   };
+  const { bulkNotifications } = useNotificationsContext();
 
   if (remainingCredits === 0) {
     return (
@@ -46,6 +49,16 @@ export const CurrentBrain = ({
           <div className={styles.brain_name_wrapper}>
             <Icon name="brain" size="small" color="black" />
             <span className={styles.brain_name}>{currentBrain.name}</span>
+            {bulkNotifications.some(
+              (bulkNotif) =>
+                bulkNotif.brain_id === currentBrain.id &&
+                bulkNotif.notifications.some((notif) => notif.status === "info")
+            ) && (
+              <div className={styles.warning}>
+                <LoaderIcon size="small" color="warning" />
+                <span>Processing knowledges</span>
+              </div>
+            )}
           </div>
         </div>
         {allowingRemoveBrain && (