[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

@@ -315,8 +315,16 @@ export default function TeamBilling() {
             title="Billing"
             subtitle="Manage team billing and plans."
         >
-            {showUBP && <TeamUsageBasedBilling />}
-            {!showUBP && renderTeamBilling()}
+            {userBillingMode === undefined ? (
+                <div className="p-20">
+                    <Spinner className="h-5 w-5 animate-spin" />
+                </div>
+            ) : (
+                <>
+                    {showUBP && <TeamUsageBasedBilling />}
+                    {!showUBP && renderTeamBilling()}
+                </>
+            )}
         </PageWithSubMenu>
     );
 }