reactify the approach

Author: panteliselef

packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx

@@ -3,32 +3,11 @@ import type { CommercePlanResource, CommerceSubscriptionPlanPeriod, PricingTable
 import { useEffect, useMemo, useState } from 'react';
 
 import { Flow } from '@/ui/customizables/Flow';
-import { useFlowMetadata } from '@/ui/elements/contexts';
 
 import { usePaymentMethods, usePlans, usePlansContext, usePricingTableContext, useSubscription } from '../../contexts';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
 
-function SyncRootElement() {
-  const clerk = useClerk();
-  const { data: subscription, isLoading: isSubscriptionLoading } = useSubscription();
-  const { data: plans, isLoading: isPlansLoading } = usePlans();
-  const { rootElement } = useFlowMetadata();
-
-  useEffect(() => {
-    if (isSubscriptionLoading || isPlansLoading) {
-      return;
-    }
-    const isReady = clerk.isSignedIn ? !!subscription : plans.length > 0;
-
-    if (isReady) {
-      rootElement?.setAttribute('data-ready', 'true');
-    }
-  }, [subscription, plans]);
-
-  return null;
-}
-
 const PricingTableRoot = (props: PricingTableProps) => {
   const clerk = useClerk();
   const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();
@@ -95,11 +74,11 @@ const PricingTableRoot = (props: PricingTableProps) => {
   return (
     <Flow.Root
       flow='pricingTable'
+      isFlowReady={clerk.isSignedIn ? !!subscription : plans.length > 0}
       sx={{
         width: '100%',
       }}
     >
-      <SyncRootElement />
       {mode !== 'modal' && (props as any).layout === 'matrix' ? (
         <PricingTableMatrix
           plans={plansToRender}

packages/clerk-js/src/ui/customizables/Flow.tsx

@@ -10,7 +10,7 @@ import { descriptors } from './index';
 
 type FlowRootProps = React.PropsWithChildren & FlowMetadata & { sx?: ThemableCssProp };
 
-const Root = (props: FlowRootProps) => {
+const Root = (props: FlowRootProps & { isFlowReady?: boolean }) => {
   return (
     <FlowMetadataProvider flow={props.flow}>
       <InternalThemeProvider>

packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
 import { makeCustomizable } from '../customizables/makeCustomizable';
-import { useFlowMetadata } from './contexts';
 
 type RootBoxProps = React.PropsWithChildren<{ className: string }>;
 
-const _InvisibleRootBox = React.memo((props: RootBoxProps) => {
+const _InvisibleRootBox = React.memo((props: RootBoxProps & { isFlowReady?: boolean }) => {
   const [showSpan, setShowSpan] = React.useState(true);
-  const { setRootElement } = useFlowMetadata();
   const parentRef = React.useRef<HTMLElement | null>(null);
 
   React.useEffect(() => {
@@ -18,8 +16,10 @@ const _InvisibleRootBox = React.memo((props: RootBoxProps) => {
     if (showSpan) {
       setShowSpan(false);
     }
-    parent.className = props.className;
-  }, [props.className]);
+
+    parent.setAttribute('class', props.className);
+    parent.setAttribute('data-component-status', props.isFlowReady ? 'ready' : 'awaiting-data');
+  }, [props.className, props.isFlowReady]);
 
   return (
     <>
@@ -28,7 +28,6 @@ const _InvisibleRootBox = React.memo((props: RootBoxProps) => {
         <span
           ref={el => {
             parentRef.current = el ? el.parentElement : parentRef.current;
-            setRootElement(parentRef.current);
           }}
           aria-hidden
           style={{ display: 'none' }}

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -125,20 +125,11 @@ export type FlowMetadata = {
     | 'accountSwitcher';
 };
 
-const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<
-  FlowMetadata & {
-    rootElement: HTMLElement | null;
-    setRootElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  }
->('FlowMetadata');
+const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('FlowMetadata');
 
 export const FlowMetadataProvider = (props: React.PropsWithChildren<FlowMetadata>) => {
   const { flow, part } = props;
-  const [rootElement, setRootElement] = React.useState<HTMLElement | null>(null);
-  const value = React.useMemo(
-    () => ({ value: { ...props, rootElement, setRootElement } }),
-    [flow, part, rootElement, setRootElement],
-  );
+  const value = React.useMemo(() => ({ value: { ...props } }), [flow, part]);
   return <FlowMetadataCtx.Provider value={value}>{props.children}</FlowMetadataCtx.Provider>;
 };
 

packages/react/src/components/uiComponents.tsx

@@ -577,7 +577,11 @@ export const Waitlist = withClerk(
 
 export const PricingTable = withClerk(
   ({ clerk, component, fallback, ...props }: WithClerkProp<PricingTableProps & FallbackProp>) => {
-    const mountingStatus = useWaitForComponentMount(component, { selector: '[data-ready="true"]' });
+    const mountingStatus = useWaitForComponentMount(component, {
+      // This attribute is added to the PricingTable root element after we've successfully fetched the plans asynchronously.
+      selector: '[data-component-status="ready"]',
+    });
+    console.log('mountingStatus', mountingStatus);
     const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded;
 
     const rendererRootProps = {