feat: implement loading state and error handling in PricingSection; add Suspense for async components in Pricing and Settings pages

app/pricing/page.tsx

@@ -1,9 +1,12 @@
+import { Suspense } from 'react'
 import PricingSection from '@/components/PricingSection'
 
 export default function PricingPage() {
   return (
     <div className="min-h-screen pt-20">
-      <PricingSection />
+      <Suspense fallback={<div className="min-h-screen pt-20 flex items-center justify-center">Loading...</div>}>
+        <PricingSection />
+      </Suspense>
     </div>
   )
 }