fix(banking): miscellaneous bug fixes (#55492)

* fix(banking): correct usage of hooks in rule action

* fix(banking): apply ESLint rules for hooks

* fix(banking): add lazy imports and code-splitting

banking/src/components/ui/alert-dialog.tsx

@@ -170,7 +170,7 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
   Pick<React.ComponentProps<typeof Button>, "variant" | "size" | "theme">) {
   return (
-    <Button variant={variant} size={size} asChild>
+    <Button variant={variant} size={size} theme={theme} asChild>
       <AlertDialogPrimitive.Cancel
         data-slot="alert-dialog-cancel"
         className={cn(className)}

banking/src/components/ui/error-banner.tsx

@@ -18,7 +18,7 @@ interface ParsedErrorMessage {
 }
 
 const parseHeading = (message?: ParsedErrorMessage) => {
-    if (message?.title === 'Message' || message?.title === 'Error') return "There was an error."
+    if (message?.title === 'Message' || message?.title === 'Error') return _("There was an error.")
     return message?.title
 }
 

banking/src/components/ui/modal-content-fallback.tsx

@@ -0,0 +1,7 @@
+import { Loader2Icon } from 'lucide-react'
+
+export const ModalContentFallback = () => (
+	<div className="flex items-center justify-center py-16">
+		<Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+	</div>
+)

banking/src/components/ui/settings-dialog.tsx

@@ -151,7 +151,7 @@ function SettingsTabItem({
                     )}
                     <span
                         className={cn(
-                            "flex-1 shrink-0 truncate text-sm duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
+                            "flex-1 shrink-0 truncate text-sm leading-4 duration-300 ease-in-out w-auto opacity-100 text-ink-gray-6",
                             icon && "ms-2"
                         )}
                     >