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;
         }
@@ -70,20 +85,20 @@
         <g>
           <path
             d="M82.5623 18.5705H89.864L105.338 43.312V18.5705H112.079V53.6281H104.827L89.3025 28.938V53.6281H82.5623V18.5705ZM142.207 53.628H135.925V49.712C134.496 52.4679 131.586 54.0196 127.91 54.0196C122.088 54.0196 118.307 49.9127 118.307 44.0021V28.3847H124.589V42.7098C124.589 46.1656 126.735 48.569 129.951 48.569C133.475 48.569 135.925 45.8646 135.925 42.1591V28.3847H142.207V53.628ZM164.064 53.2289L158.038 44.8145L152.011 53.2289H145.321L154.617 40.0566L146.037 27.9857H152.88L158.038 35.2498L163.144 27.9857H170.039L161.407 40.0566L170.702 53.2289H164.064V53.2289ZM183.469 20.7726V28.3842H190.618V33.5435H183.469V46.0746C183.469 46.4954 183.639 46.8991 183.942 47.1969C184.245 47.4947 184.657 47.6623 185.086 47.663H190.618V53.6177H186.481C180.864 53.6177 177.188 50.4115 177.188 44.8068V33.5484H172.132V28.3842H175.304C176.783 28.3842 177.644 27.5203 177.644 26.091V20.7726H183.469Z"
-          fill="currentColor"/>
+            fill="currentColor" />
           <path fill-rule="evenodd" clip-rule="evenodd"
             d="M30.1185 11.5456C28.2332 8.30393 23.5198 8.30392 21.6345 11.5456L1.08737 46.8747C-0.797952 50.1164 1.5587 54.1685 5.32936 54.1685H21.3695C19.7583 52.7604 19.1616 50.3244 20.3809 48.2344L35.9424 21.5594L30.1185 11.5456V11.5456Z"
-          fill="#80EEC0"/>
+            fill="#80EEC0" />
           <path
             d="M43.1374 19.2952C44.6977 16.6429 48.5984 16.6429 50.1586 19.2952L67.1631 48.2009C68.7234 50.8531 66.7731 54.1685 63.6525 54.1685H29.6435C26.5229 54.1685 24.5726 50.8531 26.1329 48.2009L43.1374 19.2952Z"
-          fill="#00DC82"/>
+            fill="#00DC82" />
           <path id="nuxtImageDigit3"
             d="M198.483 53.8005H209.174C211.776 53.8005 213.961 53.3168 215.729 52.3494C217.531 51.382 218.898 50.0977 219.832 48.4965C220.766 46.8953 221.234 45.1272 221.234 43.1925C221.234 40.8907 220.616 38.9893 219.382 37.4882C218.148 35.9537 216.547 34.9863 214.578 34.586C216.18 34.1189 217.514 33.2183 218.582 31.8839C219.682 30.5162 220.233 28.8483 220.233 26.8802C220.233 25.1789 219.799 23.6277 218.932 22.2266C218.098 20.8256 216.847 19.7081 215.179 18.8741C213.544 18.0068 211.526 17.5731 209.124 17.5731C205.755 17.5731 203.003 18.5072 200.868 20.3752C198.767 22.2433 197.649 24.7952 197.516 28.031H203.77C203.87 26.63 204.371 25.4457 205.271 24.4783C206.206 23.5109 207.49 23.0272 209.124 23.0272C210.626 23.0272 211.793 23.4275 212.627 24.2282C213.494 24.9954 213.928 26.0295 213.928 27.3305C213.928 28.8983 213.361 30.0826 212.227 30.8832C211.093 31.6838 209.675 32.0841 207.974 32.0841H205.322V37.338H207.923C209.992 37.338 211.676 37.8217 212.977 38.7891C214.312 39.7232 214.979 41.1076 214.979 42.9423C214.979 44.5101 214.478 45.8111 213.478 46.8452C212.477 47.8793 210.992 47.7792 209.124 47.7792H198.483C198.55 50.3479 198.483 51.9491 198.483 53.8005Z"
-          fill="currentColor"/>
+            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
+      let ANIMATION_KEY = 'nuxt-loading-enable-animation'
-        .document
+      let isLowPerformance = checkIsLowPerformance()
-        .getElementById('nuxtImg')
+      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()
+      function toggleAnimation(value = !enableAnimation) {
-
+        enableAnimation = value
-      body.addEventListener('mousemove', mouseMove)
+        if (value) {
-      body.addEventListener('mouseleave', hide)
+          onFocusOut()
-
+          animationToggle.innerText = 'Animation Enabled'
-      window.onunload = function () {
-        body.removeEventListener('mousemove', mouseMove);
-        body.removeEventListener('mouseleave', hide);
         }
+        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)