AI podcast maker performance optimizations

frontend/src/components/PodcastMaker/ui/GlassyCard.tsx

@@ -5,10 +5,16 @@ import { Paper, alpha } from "@mui/material";
 export const GlassyCard = motion(Paper);
 
 export const glassyCardSx = {
-  borderRadius: 2,
-  border: "1px solid rgba(0,0,0,0.08)",
+  borderRadius: 3,
+  border: "1px solid rgba(15, 23, 42, 0.06)",
   background: "#ffffff",
-  p: 2.5,
-  boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+  p: 3,
+  boxShadow: "0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04)",
+  color: "#0f172a",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    boxShadow: "0 4px 6px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06)",
+    borderColor: "rgba(15, 23, 42, 0.1)",
+  },
 };
 

frontend/src/components/PodcastMaker/ui/PrimaryButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, CircularProgress, Tooltip, alpha } from "@mui/material";
+import { Button, CircularProgress, Tooltip, alpha, SxProps, Theme } from "@mui/material";
 
 interface PrimaryButtonProps {
   children: React.ReactNode;
@@ -9,6 +9,7 @@ interface PrimaryButtonProps {
   startIcon?: React.ReactNode;
   tooltip?: string;
   ariaLabel?: string;
+  sx?: SxProps<Theme>;
 }
 
 export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
@@ -19,6 +20,7 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
   startIcon,
   tooltip,
   ariaLabel,
+  sx,
 }) => {
   const button = (
     <Button
@@ -41,6 +43,7 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
           background: alpha("#9ca3af", 0.3),
           color: alpha("#fff", 0.5),
         },
+        ...sx,
       }}
     >
       {children}

frontend/src/components/PodcastMaker/ui/SecondaryButton.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Button, Tooltip, alpha } from "@mui/material";
+import { Button, Tooltip, CircularProgress, alpha } from "@mui/material";
 
 interface SecondaryButtonProps {
   children: React.ReactNode;
   onClick?: () => void;
   disabled?: boolean;
+  loading?: boolean;
   startIcon?: React.ReactNode;
   tooltip?: string;
   ariaLabel?: string;
@@ -14,6 +15,7 @@ export const SecondaryButton: React.FC<SecondaryButtonProps> = ({
   children,
   onClick,
   disabled = false,
+  loading = false,
   startIcon,
   tooltip,
   ariaLabel,
@@ -22,8 +24,8 @@ export const SecondaryButton: React.FC<SecondaryButtonProps> = ({
     <Button
       variant="outlined"
       onClick={onClick}
-      disabled={disabled}
-      startIcon={startIcon}
+      disabled={disabled || loading}
+      startIcon={loading ? <CircularProgress size={16} /> : startIcon}
       aria-label={ariaLabel}
       sx={{
         borderColor: "rgba(255,255,255,0.2)",