feat(templates): ability to disable animation effect in loading page (#161)

packages/ui-templates/templates/loading/index.html

@@ -33,6 +33,17 @@
         filter: blur(100px);
         opacity: 0.5;
       }
+      #animation-toggle {
+        position: fixed;
+        padding: 10px;
+        top: 0;
+        right: 0;
+        transition: opacity 0.4s ease-in;
+        opacity: 0;
+      }
+      #animation-toggle:hover {
+        opacity: 0.8;
+      }
       @keyframes gradient {
         0% {
           background-position: 0 0;
@@ -53,6 +64,10 @@
         }
       }
       @media (prefers-color-scheme: dark) {
+        html, body {
+          color: white;
+          color-scheme: dark;
+        }
         #nuxtImageDigit3 {
           fill: #00DC82 !important;
         }
@@ -82,8 +97,8 @@
             fill="currentColor" />
         </g>
       </svg>
-
     </a>
+    <button id="animation-toggle">Animation Enabled</button>
     <div class="spotlight-wrapper">
       <div class="fixed left-0 right-0 spotlight spotlight-top z-10"></div>
     </div>
@@ -92,23 +107,38 @@
     </div>
     <div class="nuxt-loader-bar"></div>
     <script>
-      const nuxtImg = window
-        .document
-        .getElementById('nuxtImg')
+      let ANIMATION_KEY = 'nuxt-loading-enable-animation'
+      let isLowPerformance = checkIsLowPerformance()
+      let enableAnimation = localStorage.getItem(ANIMATION_KEY) === 'false'
+         ? false
+         : localStorage.getItem(ANIMATION_KEY) === 'true'
+          ? true
+          : !isLowPerformance
+
+      const nuxtImg = window.document.getElementById('nuxtImg')
+      const animationToggle = window.document.getElementById('animation-toggle')
       const body = window.document.body
-      const mouseLightContainer = window
-        .document
-        .getElementById('mouseLight')
       let bodyRect
 
+      function checkIsLowPerformance() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+         || navigator.hardwareConcurrency < 2
+         || navigator.deviceMemory < 1
+      }
       function calculateDistance(elem, mouseX, mouseY) {
         return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.x + (elem.width / 2)), 2) + Math.pow(mouseY - (elem.top + (elem.height / 2)), 2)));
       }
-      const hide = () => {
+      function onFocusOut() {
+        if (!enableAnimation) {
+          return
+        }
         mouseLight.style.opacity = 0
         nuxtImg.style.opacity = 0
       }
-      const mouseMove = (e) => {
+      function onMouseMove(e) {
+        if (!enableAnimation) {
+          return
+        }
         const pointerRect = nuxtImg.getBoundingClientRect()
         if (!bodyRect) {
           bodyRect = body.getBoundingClientRect()
@@ -130,15 +160,27 @@
         nuxtImg.style.opacity = Math.min(Math.max(size / 4, 0.6), 1)
       }
 
-      hide()
-
-      body.addEventListener('mousemove', mouseMove)
-      body.addEventListener('mouseleave', hide)
-
-      window.onunload = function () {
-        body.removeEventListener('mousemove', mouseMove);
-        body.removeEventListener('mouseleave', hide);
+      function toggleAnimation(value = !enableAnimation) {
+        enableAnimation = value
+        if (value) {
+          onFocusOut()
+          animationToggle.innerText = 'Animation Enabled'
         }
+        else {
+          mouseLight.style.opacity = 0
+          nuxtImg.style.opacity = 1
+          nuxtImg.style['mask-image'] = ''
+          nuxtImg.style['-webkit-mask-image'] = ''
+          animationToggle.innerText = 'Animation Disabled'
+        }
+        localStorage.setItem(ANIMATION_KEY, enableAnimation ? 'true' : 'false')
+      }
+
+      animationToggle.addEventListener('click', () => toggleAnimation(), { passive: true})
+      body.addEventListener('mousemove', onMouseMove, { passive: true })
+      body.addEventListener('mouseleave', onFocusOut, { passive: true })
+
+      toggleAnimation(enableAnimation)
 
       if (typeof window.fetch === 'undefined') {
         setTimeout(() => window.location.reload(), 1000)