Merge pull request #764 from microsoft/psl-bug-30854

fix: Fix team plan rendering to resolve bug #30854.

Author: Roopan-Microsoft

src/frontend/src/components/content/PlanPanelLeft.tsx

@@ -36,7 +36,8 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
   onTeamUpload,
   isHomePage,
   selectedTeam: parentSelectedTeam,
-  onNavigationWithAlert
+  onNavigationWithAlert,
+  isLoadingTeam
 }) => {
   const { dispatchToast } = useToastController("toast");
   const navigate = useNavigate();
@@ -218,7 +219,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
 
           {!isHomePage && (
             <TeamSelected
-              selectedTeam={TeamService.getStoredTeam()}
+              selectedTeam={selectedTeam}
             />
           )}
 
@@ -247,6 +248,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
           onTaskSelect={handleTaskSelect}
           loading={plansLoading}
           selectedTaskId={selectedTaskId ?? undefined}
+          isLoadingTeam={isLoadingTeam}
         />
 
         <PanelFooter>

src/frontend/src/components/content/TaskList.tsx

@@ -22,6 +22,7 @@ const TaskList: React.FC<TaskListProps> = ({
   onTaskSelect,
   loading,
   selectedTaskId,
+  isLoadingTeam
 }) => {
   const renderTaskItem = (task: Task) => {
     const isActive = task.id === selectedTaskId;
@@ -84,7 +85,7 @@ const TaskList: React.FC<TaskListProps> = ({
             Completed
           </AccordionHeader>
           <AccordionPanel>
-            {loading
+            {(loading || isLoadingTeam)
               ? Array.from({ length: 5 }, (_, i) =>
                 renderSkeleton(`completed-${i}`)
               )

src/frontend/src/models/planPanelLeft.tsx

@@ -9,4 +9,5 @@ export interface PlanPanelLefProps {
     isHomePage: boolean;
     selectedTeam?: TeamConfig | null;
     onNavigationWithAlert?: (navigationFn: () => void) => void;
+    isLoadingTeam?: boolean;
 }

src/frontend/src/models/taskList.tsx

@@ -10,4 +10,5 @@ export interface TaskListProps {
     onTaskSelect: (taskId: string) => void;
     loading?: boolean;
     selectedTaskId?: string;
+    isLoadingTeam?: boolean;
 }

src/frontend/src/pages/HomePage.tsx

@@ -200,6 +200,7 @@ const HomePage: React.FC = () => {
                         onTeamUpload={handleTeamUpload}
                         isHomePage={true}
                         selectedTeam={selectedTeam}
+                        isLoadingTeam={isLoadingTeam}
                     />
                     <Content>
                         <ContentToolbar

src/frontend/src/pages/PlanPage.tsx

@@ -715,6 +715,12 @@ const PlanPage: React.FC = () => {
         initializePlanLoading();
     }, [planId, loadPlanData, resetPlanVariables, setErrorLoading]);
 
+    useEffect(() => {
+        if (planData?.team) {
+            setSelectedTeam(planData.team);
+        }
+    }, [planData, setSelectedTeam]);
+
     if (errorLoading) {
         return (
             <CoralShellColumn>