Fix loading image

add dimmed loading image
add vercel loading icon

components/RUA/loading/RUALoading.tsx

@@ -1,17 +1,33 @@
 import React from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import loadingImage from 'public/images/img/mona-loading-default.gif';
+import loadingImageDimmed from 'public/images/img/mona-loading-dimmed.gif';
 import Image from 'next/image';
+import { useTheme } from 'next-themes';
+
+type Props = {
+  classNames?: string;
+};
+
+const RUALoading = ({ classNames }: Props) => {
+  const { systemTheme, theme } = useTheme();
+  const currentTheme = theme === 'system' ? systemTheme : theme;
 
-const RUALoading = () => {
   return (
     <div
-      className={classNames(
-        'h-[300px] flex loading',
-        'flex-col items-center justify-center'
+      className={cn(
+        'flex loading',
+        'flex-col items-center justify-center',
+        classNames
       )}
     >
-      <Image width={50} height={50} src={loadingImage} alt="Loading" />
+      <Image
+        width={50}
+        height={50}
+        priority
+        src={currentTheme === 'dark' ? loadingImageDimmed : loadingImage}
+        alt="Loading"
+      />
 
       <span className="my-4">rua rua rua...</span>
     </div>

components/RUA/loading/VercelLoading.module.css

@@ -0,0 +1,69 @@
+.container {
+  position: absolute;
+  bottom: 10px;
+  right: 30px;
+
+  border-radius: 3px;
+  background: #000;
+  color: #fff;
+  font: initial;
+  cursor: initial;
+  letter-spacing: initial;
+  text-shadow: initial;
+  text-transform: initial;
+  visibility: initial;
+
+  padding: 7px 10px 8px 10px;
+  align-items: center;
+  box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25),
+    0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+  display: none;
+  opacity: 0;
+  transition: opacity 0.1s ease, bottom 0.1s ease;
+  animation: fade-in 0.1s ease-in-out;
+}
+
+.container.visible {
+  display: flex;
+}
+
+.container.building {
+  bottom: 20px;
+  opacity: 1;
+}
+
+.icon-wrapper {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-wrapper > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.icon-group {
+  animation: strokedash 1s ease-in-out both infinite;
+}
+
+@keyframes fade-in {
+  from {
+    bottom: 10px;
+    opacity: 0;
+  }
+  to {
+    bottom: 20px;
+    opacity: 1;
+  }
+}
+
+@keyframes strokedash {
+  0% {
+    stroke-dasharray: 0 226;
+  }
+  80%,
+  100% {
+    stroke-dasharray: 659 226;
+  }
+}

components/RUA/loading/VercelLoading.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import styles from './VercelLoading.module.css';
+
+const VercelLoading = () => {
+  return (
+    <>
+      <div
+        id="container"
+        className={classNames(
+          styles.container,
+          styles.visible,
+          styles.building
+        )}
+      >
+        <div id="icon-wrapper" className={styles['icon-wrapper']}>
+          <svg viewBox="0 0 226 200">
+            <defs>
+              <linearGradient
+                x1="114.720775%"
+                y1="181.283245%"
+                x2="39.5399306%"
+                y2="100%"
+                id="linear-gradient"
+              >
+                <stop stopColor="#000000" offset="0%"></stop>
+                <stop stopColor="#FFFFFF" offset="100%"></stop>
+              </linearGradient>
+            </defs>
+            <g
+              id="icon-group"
+              fill="none"
+              stroke="url(#linear-gradient)"
+              strokeWidth="18"
+              className={styles['icon-group']}
+            >
+              <path d="M113,5.08219117 L4.28393801,197.5 L221.716062,197.5 L113,5.08219117 Z"></path>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default VercelLoading;