From 0dce1599d8d75d1820a49ba092ee1494e67cad16 Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Fri, 11 Oct 2024 10:53:36 +0200
Subject: [PATCH] Honor prefers-reduced-motion user preference #9894

Makes it so that we disable all animations if the user prefers reduced
motion. Because there might be up to 7.4% of users who are impacted by
"motion sickness":

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4069154/#:~:text=The%20study%20found%20lifetime%20adult,preponderance%20%5B27%2C29%5D.
---
 client/app/front-office/front-office.component.ts | 1 -
 client/main.ts                                    | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/front-office/front-office.component.ts b/client/app/front-office/front-office.component.ts
index 5d356f64..440acbb2 100644
--- a/client/app/front-office/front-office.component.ts
+++ b/client/app/front-office/front-office.component.ts
@@ -32,7 +32,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
     selector: 'app-front-office',
     templateUrl: './front-office.component.html',
     styleUrl: './front-office.component.scss',
-    animations: [],
     standalone: true,
     imports: [
         CommonModule,
diff --git a/client/main.ts b/client/main.ts
index 5409bfca..171025a2 100644
--- a/client/main.ts
+++ b/client/main.ts
@@ -40,12 +40,14 @@ const matTooltipCustomConfig: MatTooltipDefaultOptions = {
     touchGestures: 'off',
 };
 
+const prefersReducedMotion = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion)').matches : false;
+
 bootstrapApplication(AppComponent, {
     providers: [
         provideZoneChangeDetection({eventCoalescing: true}),
         provideNativeDateAdapter(),
         Apollo,
-        provideAnimationsAsync(),
+        provideAnimationsAsync(prefersReducedMotion ? 'noop' : 'animations'),
         naturalProviders,
         provideErrorHandler(localConfig.log.url, LoggerExtraService),
         provideSeo({