Add Metadata Loading and Metadata Error to mobile view

src/app/dars/dars-view/dars-view.component.html

@@ -51,7 +51,24 @@
 </div>
 
 <div *ngIf="mobileView.matches">
-  <mat-card class="mat-card-mobile">
+
+  <!-- METADATA LOADING -->
+  <mat-card class="dars-view-loading" *ngIf="(metadataStatus$ | async) === 'Loading' || (metadataStatus$ | async) === 'NotLoaded'">
+      <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
+      <h2>Loading your DARS audits</h2>
+      <p>Hang tight</p>
+    </mat-card>
+    <!-- END METADATA LOADING -->
+
+    <!-- METADATA ERROR -->
+    <mat-card class="dars-view-error" *ngIf="(metadataStatus$ | async) === 'Error'">
+      <img class="bucky-image" src="../../../assets/img/bucky-dead.svg" alt="Error Bucky Badger">
+      <h2>Error loading DARS audits</h2>
+      <p>Try again in a bit</p>
+    </mat-card>
+    <!-- END METADATA ERROR -->
+
+  <mat-card class="mat-card-mobile" *ngIf="(metadataStatus$ | async) === 'Loaded'">
       <mat-card-header>
         <mat-card-title>Degree Audit (DARS)</mat-card-title>
       </mat-card-header>

src/app/dars/dars-view/dars-view.component.scss

@@ -137,3 +137,10 @@ button {
   border-radius: 4px 4px 0 0;
   background-color: #c5050b;
 }
+
+// To be removed after DARS banner goes away
+@media screen and (max-width: 1249px) {
+  #dars-container {
+    margin-top: 2.5em;
+  }
+}