feat(ui): improve initial loading screen with spinner

frontend/src/app/layout.tsx

@@ -8,6 +8,7 @@ import { NotificationProvider } from "@/contexts/notification-context"
 import { I18nProvider } from "@/lib/i18n"
 import "./globals.css"
 import { Suspense } from "react"
+import { LoadingScreen } from "@/components/ui/loading-spinner"
 
 export const metadata: Metadata = {
   title: "GoHorseJobs - Find your next opportunity",

frontend/src/components/ui/loading-spinner.tsx

@@ -0,0 +1,24 @@
+import { Loader2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export interface LoadingSpinnerProps extends React.HTMLAttributes<SVGElement> { }
+
+export function LoadingSpinner({ className, ...props }: LoadingSpinnerProps) {
+    return (
+        <Loader2
+            className={cn("h-4 w-4 animate-spin text-primary", className)}
+            {...props}
+        />
+    )
+}
+
+export function LoadingScreen({ text = "Loading..." }: { text?: string }) {
+    return (
+        <div className="flex h-screen w-full flex-col items-center justify-center gap-3 bg-background/50 backdrop-blur-sm">
+            <LoadingSpinner className="h-10 w-10" />
+            <p className="text-sm font-medium text-muted-foreground animate-pulse">
+                {text}
+            </p>
+        </div>
+    )
+}