diff --git a/packages/shared/src/components/onboarding/OnboardingPlusStep.tsx b/packages/shared/src/components/onboarding/OnboardingPlusStep.tsx
index 9dacbd252c..a04fc2d313 100644
--- a/packages/shared/src/components/onboarding/OnboardingPlusStep.tsx
+++ b/packages/shared/src/components/onboarding/OnboardingPlusStep.tsx
@@ -12,6 +12,8 @@ import {
} from '../typography/Typography';
import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
import { PlusComparingCards } from '../plus/PlusComparingCards';
+import { ElementPlaceholder } from '../ElementPlaceholder';
+import { ListItemPlaceholder } from '../widgets/ListItemPlaceholder';
interface OnboardingStepProps {
onClickNext: () => void;
@@ -75,6 +77,37 @@ const PlusBillingCycleSwitch = ({
);
};
+const switchSkeletonItems = Array.from({ length: 2 }, (_, i) => i);
+const PlusSkeleton = (): ReactElement => (
+
+
+
+
+
+ {switchSkeletonItems.map((index) => (
+
+
+
+
+
+
+
+ {index === 1 && (
+
+ )}
+
+
+ ))}
+
+
+);
+
export const OnboardingPlusStep = ({
onClickNext,
}: OnboardingStepProps): ReactElement => {
@@ -108,7 +141,7 @@ export const OnboardingPlusStep = ({
strategy.
- {!!items?.length && (
+ {items.length ? (
<>
>
+ ) : (
+
)}
);
diff --git a/packages/shared/src/components/plus/PlusDesktop.tsx b/packages/shared/src/components/plus/PlusDesktop.tsx
index 045533aba3..a56ce4cca7 100644
--- a/packages/shared/src/components/plus/PlusDesktop.tsx
+++ b/packages/shared/src/components/plus/PlusDesktop.tsx
@@ -58,7 +58,7 @@ export const PlusDesktop = ({
checkoutRef={ref}
className={{
container:
- 'min-h-40 w-[28.5rem] rounded-16 border border-border-subtlest-tertiary bg-background-default p-5',
+ 'min-h-40 w-[28.5rem] rounded-16 border border-border-subtlest-tertiary bg-background-default p-5 empty:min-h-[50vh] empty:bg-surface-float',
element: 'h-[35rem]',
}}
/>
diff --git a/packages/shared/src/components/plus/PlusInfo.tsx b/packages/shared/src/components/plus/PlusInfo.tsx
index 4e70c8ca7e..de1586c8f1 100644
--- a/packages/shared/src/components/plus/PlusInfo.tsx
+++ b/packages/shared/src/components/plus/PlusInfo.tsx
@@ -22,6 +22,7 @@ import {
import { usePlusSubscription } from '../../hooks/usePlusSubscription';
import { LogEvent } from '../../lib/log';
import type { CommonPlusPageProps } from './common';
+import { ElementPlaceholder } from '../ElementPlaceholder';
type PlusInfoProps = {
productOptions: ProductOption[];
@@ -30,6 +31,25 @@ type PlusInfoProps = {
onContinue?: () => void;
};
+const skeletonItems = Array.from({ length: 3 }, (_, i) => i);
+const RadioGroupSkeleton = () => (
+
+ {skeletonItems.map((index) => (
+
+
+
+
+ ))}
+
+);
+
export const PlusInfo = ({
productOptions,
selectedOption,
@@ -77,6 +97,7 @@ export const PlusInfo = ({
Billing cycle
+ {productOptions.length === 0 && }
{productOptions.map((option) => {
const { label, value, price, currencyCode, extraLabel } = option;
const checked = selectedOption === value;
diff --git a/packages/shared/src/hooks/auth/useOnboarding.tsx b/packages/shared/src/hooks/auth/useOnboarding.tsx
index 95642ed147..26d2e34570 100644
--- a/packages/shared/src/hooks/auth/useOnboarding.tsx
+++ b/packages/shared/src/hooks/auth/useOnboarding.tsx
@@ -33,7 +33,7 @@ export const useOnboarding = (): UseOnboarding => {
return {
shouldShowAuthBanner,
- isOnboardingReady: isAuthReady && (isActionsFetched || !user),
+ isOnboardingReady: isActionsFetched && isAuthReady,
hasCompletedEditTags,
hasCompletedContentTypes,
completeStep: (action: ActionType) => completeAction(action),