[dashboard] Fix BillingMode UI glitches

Author: geropl

components/dashboard/src/Menu.tsx

@@ -152,9 +152,6 @@ export default function Menu() {
             server.isStudent().then((v) => () => setIsStudent(v)),
             server.isChargebeeCustomer().then((v) => () => setIsChargebeeCustomer(v)),
         ]).then((setters) => setters.forEach((s) => s()));
-
-        // Refresh billing mode
-        refreshUserBillingMode();
     }, []);
 
     useEffect(() => {
@@ -163,6 +160,11 @@ export default function Menu() {
         }
     }, [team]);
 
+    useEffect(() => {
+        // Refresh billing mode
+        refreshUserBillingMode();
+    }, [teams]);
+
     const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
     const leftMenu: Entry[] = (() => {
         // Project menu

components/dashboard/src/teams/TeamBilling.tsx

@@ -28,7 +28,7 @@ import { UserContext } from "../user-context";
 type PendingPlan = Plan & { pendingSince: number };
 
 export default function TeamBilling() {
-    const { user, userBillingMode } = useContext(UserContext);
+    const { user } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
@@ -308,15 +308,23 @@ export default function TeamBilling() {
         );
     }
 
-    const showUBP = BillingMode.showUsageBasedBilling(userBillingMode);
+    const showUBP = BillingMode.showUsageBasedBilling(teamBillingMode);
     return (
         <PageWithSubMenu
             subMenu={getTeamSettingsMenu({ team, billingMode: teamBillingMode })}
             title="Billing"
             subtitle="Manage team billing and plans."
         >
-            {showUBP && <TeamUsageBasedBilling />}
-            {!showUBP && renderTeamBilling()}
+            {teamBillingMode === undefined ? (
+                <div className="p-20">
+                    <Spinner className="h-5 w-5 animate-spin" />
+                </div>
+            ) : (
+                <>
+                    {showUBP && <TeamUsageBasedBilling />}
+                    {!showUBP && renderTeamBilling()}
+                </>
+            )}
         </PageWithSubMenu>
     );
 }