lots of changes with docker

frontend/src/routes/(auth)/user.profile.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { Suspense } from "react";
 import { toast } from "sonner";
 import {
 	Card,
@@ -9,7 +10,9 @@ import {
 } from "@/components/ui/card";
 import { authClient, useSession } from "@/lib/auth-client";
 import { useAppForm } from "@/lib/formSutff";
+import { Spinner } from "../../components/ui/spinner";
 import ChangePassword from "./-components/ChangePassword";
+import NotificationsSubCard from "./-components/NotificationsSubCard";
 
 export const Route = createFileRoute("/(auth)/user/profile")({
 	beforeLoad: async () => {
@@ -93,6 +96,26 @@ function RouteComponent() {
 			<div>
 				<ChangePassword />
 			</div>
+			<div>
+				<Suspense
+					fallback={
+						<Card className="p-3 w-96">
+							<CardHeader>
+								<CardTitle>Notifications</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="flex justify-center m-auto">
+									<div>
+										<Spinner className="size-32" />
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					}
+				>
+					{session && <NotificationsSubCard user={session.user} />}
+				</Suspense>
+			</div>
 		</div>
 	);
 }