ROENROLL-1385

src/app/degree-planner/degree-planner.component.html

-<mat-sidenav-container id="plans-container">
+<mat-sidenav-container id="plans-container" *ngIf="hasLoadedDegreePlan$ | async">
 	<!-- Menu side nav -->
 	<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
 		<cse-sidenav-menu-item></cse-sidenav-menu-item>

src/app/degree-planner/degree-planner.component.ts

@@ -20,6 +20,7 @@ import {
   firstActiveTermCode,
   getAllVisibleTermsByYear,
   getVisibleDegreePlan,
+  hasLoadedDegreePlan,
 } from '@app/degree-planner/store/selectors';
 
 // Actions
@@ -40,6 +41,7 @@ export class DegreePlannerComponent implements OnInit {
   public mobileView: MediaQueryList;
   public coursesData$: any;
 
+  public hasLoadedDegreePlan$: Observable<boolean>;
   public visibleRoadmapId$: Observable<number | undefined>;
   public visibleDegreePlan$: Observable<DegreePlan | undefined>;
   public allDegreePlans$: Observable<DegreePlan[]>;
@@ -55,6 +57,7 @@ export class DegreePlannerComponent implements OnInit {
   }
 
   public ngOnInit() {
+    this.hasLoadedDegreePlan$ = this.store.pipe(select(hasLoadedDegreePlan));
     this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
     this.visibleDegreePlan$ = this.store.pipe(select(getVisibleDegreePlan));
     this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));

src/app/degree-planner/store/selectors.ts

@@ -13,6 +13,11 @@ export const getDegreePlannerState = ({ degreePlanner }: GlobalState) => {
   return degreePlanner;
 };
 
+export const hasLoadedDegreePlan = createSelector(
+  getDegreePlannerState,
+  state => state.visibleDegreePlan !== undefined,
+);
+
 export const getSavedForLaterCourses = createSelector(
   getDegreePlannerState,
   state => state.savedForLaterCourses,