feat: revamp dashboard mensa section

src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.html

@@ -1,17 +1,34 @@
-<swiper
-  [config]="sliderOptions"
-  [navigation]="true"
-  class="mensa-swiper card-swiper"
-  *ngIf="dishes && dishes.length > 0"
->
-  <ng-template swiperSlide *ngFor="let dish of dishes">
-    <a [routerLink]="'/data-detail/' + dish.uid" class="card">
-      <ion-label>{{ 'name' | thingTranslate: dish }}</ion-label>
-    </a>
-  </ng-template>
-</swiper>
-<div class="card" *ngIf="!dishes || dishes.length === 0">
-  <ion-label>
-    {{ 'dashboard.canteens.no_dishes_available' | translate }}
-  </ion-label>
-</div>
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ng-container *ngIf="dishes | async as dishes; else loading">
+  <simple-swiper *ngIf="dishes.length > 0" @fade>
+    <stapps-data-list-item
+      *ngFor="let dish of dishes"
+      [hideThumbnail]="true"
+      [favoriteButton]="false"
+      [item]="dish"
+      appearance="square"
+    ></stapps-data-list-item>
+  </simple-swiper>
+  <ion-item class="no-dishes" *ngIf="!dishes || dishes.length === 0" lines="none">
+    <ion-label>
+      {{ 'dashboard.canteens.no_dishes_available' | translate }}
+    </ion-label>
+  </ion-item>
+</ng-container>
+<ng-template #loading>
+  <div class="placeholder"></div>
+</ng-template>