Fix loading of recommended methods

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -97,7 +97,8 @@ export function CommunicationMethodsScreen() {
     [comm.methods, selectedIds, state.customMethodCardMetaById],
   );
 
-  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+  const { sampleCards, compactCardIds, methodById, recommendationsReady } =
+    useMethodCardDeckOrdering(
     "communication",
     mergedMethods,
     selectedIds,
@@ -735,7 +736,11 @@ export function CommunicationMethodsScreen() {
             justification="center"
           />
         </div>
-        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
+        <div
+          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
+          aria-busy={!recommendationsReady}
+        >
+          {recommendationsReady ? (
           <CardStack
             cards={sampleCards}
             selectedIds={selectedIds}
@@ -752,6 +757,7 @@ export function CommunicationMethodsScreen() {
             compactDesktopLayout="flexWrap"
             headerLockupSize={mdUp ? "L" : "M"}
           />
+          ) : null}
         </div>
       </div>
 

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -94,7 +94,8 @@ export function ConflictManagementScreen() {
     [cm.methods, selectedIds, state.customMethodCardMetaById],
   );
 
-  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+  const { sampleCards, compactCardIds, methodById, recommendationsReady } =
+    useMethodCardDeckOrdering(
     "conflictManagement",
     mergedMethods,
     selectedIds,
@@ -734,7 +735,11 @@ export function ConflictManagementScreen() {
             justification="center"
           />
         </div>
-        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
+        <div
+          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
+          aria-busy={!recommendationsReady}
+        >
+          {recommendationsReady ? (
           <CardStack
             cards={sampleCards}
             selectedIds={selectedIds}
@@ -751,6 +756,7 @@ export function ConflictManagementScreen() {
             compactDesktopLayout="pyramidFive"
             headerLockupSize={mdUp ? "L" : "M"}
           />
+          ) : null}
         </div>
       </div>
 

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -95,7 +95,8 @@ export function MembershipMethodsScreen() {
     [mem.methods, selectedIds, state.customMethodCardMetaById],
   );
 
-  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+  const { sampleCards, compactCardIds, methodById, recommendationsReady } =
+    useMethodCardDeckOrdering(
     "membership",
     mergedMethods,
     selectedIds,
@@ -727,7 +728,11 @@ export function MembershipMethodsScreen() {
             justification="center"
           />
         </div>
-        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
+        <div
+          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
+          aria-busy={!recommendationsReady}
+        >
+          {recommendationsReady ? (
           <CardStack
             cards={sampleCards}
             selectedIds={selectedIds}
@@ -744,6 +749,7 @@ export function MembershipMethodsScreen() {
             compactDesktopLayout="pyramidFive"
             headerLockupSize={mdUp ? "L" : "M"}
           />
+          ) : null}
         </div>
       </div>
 

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -108,7 +108,8 @@ export function DecisionApproachesScreen() {
     [da.methods, selectedIds, state.customMethodCardMetaById],
   );
 
-  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+  const { sampleCards, compactCardIds, methodById, recommendationsReady } =
+    useMethodCardDeckOrdering(
     "decisionApproaches",
     mergedMethods,
     selectedIds,
@@ -761,7 +762,11 @@ export function DecisionApproachesScreen() {
         </div>
       }
     >
-      <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">
+      <div
+        className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0"
+        aria-busy={!recommendationsReady}
+      >
+        {recommendationsReady ? (
         <CardStack
           cards={sampleCards}
           selectedIds={selectedIds}
@@ -791,6 +796,7 @@ export function DecisionApproachesScreen() {
           className="w-full"
           headerLockupSize={mdUp ? "L" : "M"}
         />
+        ) : null}
       </div>
 
       <Create