Update main.component.html

EnessenE · Feb 29, 2024 · 97bc8b1 · 97bc8b1
1 parent 87c2466
commit 97bc8b1
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html
@@ -41,7 +41,7 @@
                     type="search"
                     placeholder="Utrecht Centraal"
                     aria-label="Search"
-                    [value]="destinationStop" 
+                    [value]="destinationStop"
                     (input)="onSearchInputChange($event)"
                 />
                 <div>
@@ -64,17 +64,19 @@
             </form>
         </div>
         <div class="col-lg-6 col-sm-12">
+            <h1>Kom ik aan?</h1>
             @if (loadingPossibility) {
                 <div>
                     <div
                         class="spinner-border"
                         role="status"
                     >
+                        ❓
                         <span class="visually-hidden">Loading...</span>
                     </div>
+                    <p>Even kijken...</p>
                 </div>
             } @else if (possibility) {
-                <h1>Kom ik aan?</h1>
                 @switch (possibility.journeyExpectation) {
                     @case ('Full') {
                         <h1 style="color: green">Ja!</h1>
@@ -119,7 +121,16 @@ <h5 class="mb-1">{{ disruption.title }}</h5>
                         Geen problemen op dit traject volgens onze data.
                     }
                 } @else if (loadingPossibility) {
-                    <p>Zoekende voor data over storing op dit traject...</p>
+                    <div>
+                        <div
+                            class="spinner-border"
+                            role="status"
+                        >
+                            🚉
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p>Zoekende voor data over problemen op dit traject...</p>
+                    </div>
                 } @else {
                     <p>Selecteer een traject om problemen onderweg in te zien</p>
                 }
@@ -249,7 +260,16 @@ <h6 class="mb-1">
                     }
                 </div>
             } @else if (loadingPossibility) {
-                <p>Zoekende voor data voor jou reis...</p>
+                <div>
+                    <div
+                        class="spinner-border"
+                        role="status"
+                    >
+                        🚅
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+                <p>Zoekende voor advies voor jou reis...</p>
             } @else {
                 <p>Selecteer een route voor reisadvies.</p>
             }