From 52eb2f0b6a9a0105465570750d07220cfeebf1a6 Mon Sep 17 00:00:00 2001
From: Luca Pagliaro <pagliaroluca@gmail.com>
Date: Fri, 7 Feb 2025 13:45:06 +0100
Subject: [PATCH 1/2] feat: add plus skeleton in onboarding (#4161)

* feat: add plus skeleton in onboarding

* perf: add external variable for Array.from

* feat: add skeleton in PlusInfo radio group

* feat: add skeleton for iframe

* refactor: removed isLoading const
---
 .../onboarding/OnboardingPlusStep.tsx         | 37 ++++++++++++++++++-
 .../src/components/plus/PlusDesktop.tsx       |  2 +-
 .../shared/src/components/plus/PlusInfo.tsx   | 21 +++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

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 => (
+  <div className="flex flex-col items-center">
+    <div className="mx-auto my-6 inline-flex gap-1 rounded-12 border border-border-subtlest-tertiary p-1 tablet:my-8">
+      <ElementPlaceholder className="mx-auto inline-block h-10 w-80 rounded-10" />
+    </div>
+    <div className="mx-auto grid grid-cols-1 place-content-center items-start gap-6 tablet:grid-cols-2">
+      {switchSkeletonItems.map((index) => (
+        <div
+          key={index}
+          className={classNames(
+            'mx-auto w-[21rem] max-w-full rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4',
+            index === 0 ? 'min-h-80' : 'min-h-96',
+          )}
+        >
+          <ElementPlaceholder className="mb-4 h-6 w-10 rounded-4" />
+          <ElementPlaceholder className="mb-1 h-8 w-10 rounded-4" />
+          <ElementPlaceholder className="h-3 w-20 rounded-4" />
+          <ElementPlaceholder className="my-4 h-10 w-full rounded-16" />
+          <div className="flex flex-col gap-2">
+            <ListItemPlaceholder padding="p-0 gap-2.5" textClassName="h-3" />
+            {index === 1 && (
+              <ListItemPlaceholder padding="p-0 gap-2.5" textClassName="h-3" />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
 export const OnboardingPlusStep = ({
   onClickNext,
 }: OnboardingStepProps): ReactElement => {
@@ -108,7 +141,7 @@ export const OnboardingPlusStep = ({
           strategy.
         </Typography>
       </header>
-      {!!items?.length && (
+      {items.length ? (
         <>
           <PlusBillingCycleSwitch
             productOptions={items}
@@ -121,6 +154,8 @@ export const OnboardingPlusStep = ({
             onClickNext={onClickNext}
           />
         </>
+      ) : (
+        <PlusSkeleton />
       )}
     </section>
   );
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 = () => (
+  <div>
+    {skeletonItems.map((index) => (
+      <div
+        key={index}
+        className={classNames(
+          'flex min-h-12 items-center justify-between gap-2 rounded-10 !p-2',
+          index === 0 &&
+            '-m-px border border-border-subtlest-primary bg-surface-float',
+        )}
+      >
+        <ElementPlaceholder className="h-4 w-2/3" />
+        <ElementPlaceholder className="h-4 w-1/5" />
+      </div>
+    ))}
+  </div>
+);
+
 export const PlusInfo = ({
   productOptions,
   selectedOption,
@@ -77,6 +97,7 @@ export const PlusInfo = ({
         Billing cycle
       </Typography>
       <div className="min-h-[6.125rem] rounded-10 border border-border-subtlest-tertiary">
+        {productOptions.length === 0 && <RadioGroupSkeleton />}
         {productOptions.map((option) => {
           const { label, value, price, currencyCode, extraLabel } = option;
           const checked = selectedOption === value;

From 50206fb3c6a839c815ee32ad4c231c7a4e7347d7 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 7 Feb 2025 15:00:19 +0200
Subject: [PATCH 2/2] fix: this breaks annonymous pages now, urgent (#4164)

---
 packages/shared/src/hooks/auth/useOnboarding.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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),