[APP-1819] fix progress guide flash and extra gap (#9960)

src/components/ProgressGuide/List.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import {
   type LayoutChangeEvent,
   type StyleProp,
@@ -43,8 +43,16 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
 
   const actualFollowsCount = follows?.pages?.[0]?.follows?.length ?? 0
 
-  // Hide if user already follows 10+ people
+  // Clear stale guide if user already follows 10+ people
-  if (guide?.guide === 'follow-10' && actualFollowsCount >= TOTAL_AVATARS) {
+  const shouldEndGuide =
+    guide?.guide === 'follow-10' && actualFollowsCount >= TOTAL_AVATARS
+  useEffect(() => {
+    if (shouldEndGuide) {
+      endProgressGuide()
+    }
+  }, [shouldEndGuide, endProgressGuide])
+
+  if (shouldEndGuide) {
     return null
   }