Update UI and improve i18n loading logic

Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.

packages/billing/gateway/src/components/pricing-table.tsx

@@ -377,7 +377,7 @@ function PlanIntervalSwitcher(
           {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-primary border']: !selected,
+            ['hover:text-primary border text-muted-foreground']: !selected,
             ['font-semibold cursor-default hover:text-initial hover:bg-background']:
               selected,
           },
@@ -444,7 +444,7 @@ function DefaultCheckoutButton(
     <Link className={'w-full'} href={linkHref}>
       <Button
         size={'lg'}
-        className={'ring-primary w-full ring-2'}
+        className={'border-primary w-full border rounded-lg'}
         variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>

packages/i18n/src/i18n.server.ts

@@ -13,12 +13,14 @@ export async function initializeServerI18n(
   resolver: (language: string, namespace: string) => Promise<object>,
 ) {
   const i18nInstance = createInstance();
+  const loadedNamespaces = new Set<string>();
 
   await i18nInstance
     .use(
       resourcesToBackend(async (language, namespace, callback) => {
         try {
           const data = await resolver(language, namespace);
+          loadedNamespaces.add(namespace);
 
           return callback(null, data);
         } catch (error) {
@@ -27,16 +29,50 @@ export async function initializeServerI18n(
             error,
           );
 
-          return {};
+          return callback(null, {});
         }
       }),
     )
     .use(initReactI18next)
-    .init(settings, (error) => {
-      if (error) {
-        console.error('Error initializing i18n server', error);
+    .init(settings);
+
+  const namespaces = settings.ns as string[];
+
+  // If all namespaces are already loaded, return the i18n instance
+  if (loadedNamespaces.size === namespaces.length) {
+    return i18nInstance;
+  }
+
+  // Otherwise, wait for all namespaces to be loaded
+
+  const maxWaitTime = 0.1; // 100 milliseconds
+  const checkIntervalMs = 5; // 5 milliseconds
+
+  async function waitForNamespaces() {
+    const startTime = Date.now();
+
+    while (Date.now() - startTime < maxWaitTime) {
+      const allNamespacesLoaded = namespaces.every((ns) =>
+        loadedNamespaces.has(ns),
+      );
+
+      if (allNamespacesLoaded) {
+        return true;
       }
-    });
+
+      await new Promise((resolve) => setTimeout(resolve, checkIntervalMs));
+    }
+
+    return false;
+  }
+
+  const success = await waitForNamespaces();
+
+  if (!success) {
+    console.warn(
+      `Not all namespaces were loaded after ${maxWaitTime}ms. Initialization may be incomplete.`,
+    );
+  }
 
   return i18nInstance;
 }

packages/ui/src/shadcn/heading.tsx

@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 font-heading text-4xl font-bold tracking-tight dark:text-white`,
+            `scroll-m-20 font-heading text-3xl lg:text-4xl font-bold tracking-tight dark:text-white`,
             className,
           )}
         >
@@ -23,7 +23,7 @@ export function Heading({
       return (
         <h2
           className={cn(
-            `scroll-m-20 pb-2 font-heading text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
+            `scroll-m-20 pb-2 font-heading text-2xl lg:text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
             className,
           )}
         >
@@ -34,7 +34,7 @@ export function Heading({
       return (
         <h3
           className={cn(
-            'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-xl lg:text-2xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-lg lg:text-xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -56,7 +56,7 @@ export function Heading({
       return (
         <h5
           className={cn(
-            'scroll-m-20 font-heading text-lg font-medium',
+            'scroll-m-20 font-heading text-base lg:text-lg font-medium',
             className,
           )}
         >