✨ Add loading skeletons for Shopify gate not connected and address pages

♻️ Refactor Shopify gate sections to remove Suspense and fallbacks

🐛 Remove unused imports and clean up code across Shopify features and i18n libs

💡 Improve code readability and performance by simplifying component structures

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyGateNotConnectedSkeleton } from '@features/unlock/shopify';
+
+export default function Page() {
+  return <OffKeyGateNotConnectedSkeleton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/page.tsx

@@ -1,12 +1,8 @@
-import {
-  OffKeyGateNotConnectedSkeleton,
-  ShopifyCustomerStatus,
-} from '@features/unlock/shopify';
+import { ShopifyCustomerStatus } from '@features/unlock/shopify';
 import { getShopifyCampaignParametersForNotConnected } from '@features/unlock/shopify-api';
 import { Locale } from '@gql/shared/types';
 import dynamic from 'next/dynamic';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 
 const OffKeyGateNotConnected = dynamic(
   () =>
@@ -23,15 +19,7 @@ interface GateNotConnectedProps {
   };
 }
 
-export default function GateNotConnectedSection(props: GateNotConnectedProps) {
-  return (
-    <Suspense fallback={<OffKeyGateNotConnectedSkeleton />}>
-      <GateNotConnected {...props} />
-    </Suspense>
-  );
-}
-
-async function GateNotConnected({
+export default async function GateNotConnected({
   params: { locale, gateId },
 }: GateNotConnectedProps) {
   const campaign = await getShopifyCampaignParametersForNotConnected({

apps/unlock/app/[locale]/shopify/[gateId]/[address]/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyGateSkeleton } from '@features/unlock/shopify';
+
+export default function Page() {
+  return <OffKeyGateSkeleton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/[address]/page.tsx

@@ -1,10 +1,8 @@
-import { OffKeyGateSkeleton } from '@features/unlock/shopify';
 import { getShopifyCampaignParametersForConnected } from '@features/unlock/shopify-api';
 import { Locale } from '@gql/shared/types';
 import { OffKeyState } from '@next/iframe';
 import dynamic from 'next/dynamic';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 
 interface GateProps {
   params: {
@@ -19,15 +17,9 @@ const OffKeyGate = dynamic(
   { ssr: false },
 );
 
-export default function GateSection(props: GateProps) {
-  return (
-    <Suspense fallback={<OffKeyGateSkeleton />}>
-      <Gate {...props} />
-    </Suspense>
-  );
-}
-
-async function Gate({ params: { locale, gateId, address } }: GateProps) {
+export default async function Gate({
+  params: { locale, gateId, address },
+}: GateProps) {
   const campaign = await getShopifyCampaignParametersForConnected({
     gateId,
     locale,

libs/features/unlock/shopify/src/lib/OffKeyGateNotConnected/OffKeyGateNotConnected.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { interpolateString, Locale } from '@next/i18n';
-import { AutoAnimate, Text, TextSkeleton } from '@ui/components';
+import { AutoAnimate, Text } from '@ui/components';
 import { useShopifyCustomer } from '../hooks/useShopifyCustomer';
 import { ShopifyCustomerStatus } from '../types';
 import { OffKeyGateNotConnectedSkeleton } from './OffKeyGateNotConnectedSkeleton';

libs/next/i18n/src/index.ts

@@ -57,7 +57,6 @@ function interpolateString(
     }
     return result as string;
   } catch (error) {
-    console.error('Error interpolating string:', error);
     return str;
   }
 }