fade plan ui while degree plans are loading

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

-<mat-sidenav-container hasBackdrop="false" *ngIf="(degreePlan$ | async) as degreePlan">
+<mat-sidenav-container hasBackdrop="false">
   <mat-sidenav #addMenu position="end" mode="over" [opened]="isCourseSearchOpen$ | async">
     <mat-toolbar color="primary" class="dialog-toolbar">
       <span class="dialog-toolbar-title">Course Search</span>
@@ -9,16 +9,18 @@
   </mat-sidenav>
 
   <mat-sidenav-content>
+    <mat-progress-bar id="loading-plan-progress" mode="indeterminate" *ngIf="isLoadingPlan$ | async"></mat-progress-bar>
     <mat-sidenav-container id="plans-container">
       <!-- 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>
       </mat-sidenav>
 
-      <mat-sidenav-content id="degree-plan-wrapper">
+      <mat-sidenav-content id="degree-plan-wrapper" [ngClass]="{ isLoadingPlan: (isLoadingPlan$ | async) }" *ngIf="(degreePlan$ | async) as degreePlan">
         <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
           <mat-form-field>
             <mat-select
+              [disabled]="isLoadingPlan$ | async"
               placeholder="Degree Plans"
               class="degree-plan-selector"
               [value]="degreePlan.roadmapId"
@@ -40,7 +42,7 @@
             </mat-select>
           </mat-form-field>
 
-          <button mat-icon-button [matMenuTriggerFor]="degreePlanMenu">
+          <button mat-icon-button [matMenuTriggerFor]="degreePlanMenu" [disabled]="isLoadingPlan$ | async">
             <mat-icon>settings</mat-icon>
           </button>
           <mat-menu #degreePlanMenu="matMenu">
@@ -54,7 +56,8 @@
           </mat-menu>
         </div>
 
-        <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
+        <div id="year-wrapper" fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
+          <div id="year-mask" *ngIf="isLoadingPlan$ | async"></div>
           <mat-accordion multi="true">
             <ng-container *ngFor="let yearCode of (yearCodes$ | async)">
               <cse-year-container [yearCode]="yearCode"></cse-year-container>

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

@@ -48,3 +48,35 @@ mat-sidenav {
     padding: 12px;
   }
 }
+
+// Course search
+.search-input-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#loading-plan-progress {
+  position: absolute;
+  z-index: 1000;
+}
+
+#degree-plan-wrapper.isLoadingPlan {
+  overflow: hidden;
+
+  #year-wrapper {
+    opacity: 0.5;
+  }
+
+  #year-mask {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    z-index: 9000;
+  }
+}
+
+#year-mask {
+  display: none;
+}

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

@@ -4,8 +4,8 @@ import {
   withLatestFrom,
   distinctUntilChanged,
 } from 'rxjs/operators';
-import { OnInit, ViewChild } from '@angular/core';
-import { Observable } from 'rxjs';
+import { OnInit } from '@angular/core';
+import { Observable, of } from 'rxjs';
 import { select } from '@ngrx/store';
 import { Component } from '@angular/core';
 import { MatSelectChange } from '@angular/material';
@@ -51,6 +51,7 @@ export class DegreePlannerComponent implements OnInit {
   public termsByYear$: Observable<Year[]>;
   public yearCodes$: Observable<string[]>;
   public isCourseSearchOpen$: Observable<boolean>;
+  public isLoadingPlan$: Observable<boolean>;
 
   constructor(
     private store: Store<GlobalState>,
@@ -76,6 +77,8 @@ export class DegreePlannerComponent implements OnInit {
       select(selectors.isCourseSearchOpen),
     );
 
+    this.isLoadingPlan$ = this.store.pipe(select(selectors.isLoadingPlan));
+
     this.yearCodes$ = this.store.pipe(
       select(selectors.selectAllVisibleYears),
       map(years => Object.keys(years)),

src/app/degree-planner/store/effects/plan.effects.ts

@@ -122,6 +122,7 @@ export class DegreePlanEffects {
       return new InitialLoadSuccess({
         ...INITIAL_DEGREE_PLANNER_STATE,
         ...payload,
+        isLoadingPlan: false,
       });
     }),
     catchError(error => {

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

@@ -7,6 +7,7 @@ import {
 import {
   PlanActionTypes,
   InitialLoadSuccess,
+  SwitchPlan,
   SwitchPlanSuccess,
   MakePlanPrimary,
   MakePlanPrimarySuccess,
@@ -15,6 +16,7 @@ import {
   ChangePlanNameFailure,
   CreatePlanSuccess,
   DeletePlanSuccess,
+  PlanError,
 } from '@app/degree-planner/store/actions/plan.actions';
 import {
   MoveCourseInsideTerm,
@@ -24,6 +26,7 @@ import {
   AddCourseSuccess,
   RemoveSaveForLater,
   AddSaveForLater,
+  CourseError,
 } from '@app/degree-planner/store/actions/course.actions';
 import {
   NoteActionTypes,
@@ -51,7 +54,9 @@ import { PlannedTerm, PlannedTermEra } from '@app/core/models/planned-term';
 import * as utils from '@app/degree-planner/shared/utils';
 
 type SupportedActions =
+  | PlanError
   | InitialLoadSuccess
+  | SwitchPlan
   | SwitchPlanSuccess
   | WriteNoteSuccess
   | DeleteNoteSuccess
@@ -81,6 +86,10 @@ export function degreePlannerReducer(
   action: SupportedActions,
 ): DegreePlannerState {
   switch (action.type) {
+    case PlanActionTypes.PlanError: {
+      return { ...state, isLoadingPlan: false };
+    }
+
     /**
      * The `InitialPlanLoadResponse` action is triggered on initial Degree
      * Planner app load. It downloads a list of the user's degree plans and
@@ -90,6 +99,10 @@ export function degreePlannerReducer(
       return { ...action.payload };
     }
 
+    case PlanActionTypes.SwitchPlan: {
+      return { ...state, isLoadingPlan: true };
+    }
+
     /**
      * The `SwitchPlanSuccess` action is triggered whenever the UI needs
      * to switch which degree plan is being shown and load the data associated
@@ -97,7 +110,7 @@ export function degreePlannerReducer(
      * action payload and builds a new state using that data.
      */
     case PlanActionTypes.SwitchPlanSuccess: {
-      return { ...state, ...action.payload };
+      return { ...state, ...action.payload, isLoadingPlan: false };
     }
 
     /**

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

@@ -122,6 +122,10 @@ export const isPastTerm = (termCode: string) =>
       return termCode < currentTermCode;
     },
   );
+export const isLoadingPlan = createSelector(
+  getDegreePlannerState,
+  (state: DegreePlannerState) => state.isLoadingPlan,
+);
 
 const getTermForCode = (termCode: string, terms: PlannedTerm[]) => {
   const foundTerm = terms.find(term => term.termCode === termCode);

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

@@ -14,6 +14,7 @@ export interface DegreePlannerState {
   subjectDescriptions: SubjectMapping;
   expandedYears: string[];
   search: { visible: boolean; selectedTerm: string };
+  isLoadingPlan: boolean;
 }
 
 export const INITIAL_DEGREE_PLANNER_STATE: DegreePlannerState = {
@@ -26,4 +27,5 @@ export const INITIAL_DEGREE_PLANNER_STATE: DegreePlannerState = {
   subjectDescriptions: {},
   expandedYears: [],
   search: { visible: false, selectedTerm: '0000' },
+  isLoadingPlan: true,
 };