feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 7 insertions, 1 deletions

diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
index 755a56b40..011f6282d 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.js
@@ -1,3 +1,9 @@
+let sloganTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  sloganTransition = 'opacity 1s ease';
+}
+
 export default {
   component: {
     color: '#FFF',
@@ -5,7 +11,7 @@ export default {
   slogan: {
     display: 'block',
     opacity: 0,
-    transition: 'opacity 1s ease',
+    transition: sloganTransition,
     position: 'absolute',
     textAlign: 'center',
     width: '100%',