Added loading screen

src/components/loading/LoadingView.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { Column } from '../../common';
 
 interface LoadingViewProps
 {
@@ -8,14 +7,38 @@ interface LoadingViewProps
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
     const {} = props;
+
+    const generateStars = (count, className) => 
+    {
+        return Array.from({ length: count }, () => ({
+            top: `${ Math.random() * 100 }%`,
+            left: `${ Math.random() * 100 }%`
+        })).map((style, index) => (
+            <div key={ index } className={ className } style={ style }>
+                <div className="star-part" />
+                <div className="star-part" />
+            </div>
+        ));
+    };
+
+    const smallStars = generateStars(90, 'dot');
+    const mediumStars = generateStars(15, 'star');
     
     return (
-        <Column fullHeight className="nitro-loading" position="relative">
+        <div className="relative w-screen h-screen z-loading bg-loading">
-            <div className="container h-100">
+            <div className="container flex w-screen h-screen">
-                <Column fullHeight alignItems="center" justifyContent="end">
+                <div className="flex items-center justify-center w-screen h-screen">
-                    <div className="connecting-duck" />
+                    { smallStars }
-                </Column>
+                    { mediumStars }
+                </div>
             </div>
-        </Column>
+        </div>
+    /*    <div className="relative w-screen h-screen z-loading bg-card-header">
+            <div className="container flex w-screen h-screen">
+                <div className="flex items-center justify-center w-screen h-screen">
+                    <div className="connecting-duck" />
+                </div>
+            </div>
+        </div>*/
     );
 }

src/index.css

@@ -75,6 +75,113 @@ body {
 }
 
 @layer components {
+
+    @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+      }
+      
+      @keyframes scale {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.5); }
+      }
+      
+      .dot {
+        position: absolute;
+        width: 2px;
+        height: 2px;
+        background-color: white;
+        animation: blink 2s infinite;
+    }
+
+    .star {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        color: #ffffff;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: currentColor;
+            width: 5px;
+            height: 5px;
+            -webkit-animation: blink 1s linear infinite;
+            animation: blink 1s linear infinite;
+        }
+
+        .star-part {
+            position: absolute;
+            background-color: currentColor;
+
+            &:nth-child(1){
+                top: 0;
+                left: 50%;
+                width: 1px;
+                height: 100%;
+                transform: translateX(-50%);
+            }
+
+            &:nth-child(2) {
+                top: 50%;
+                left: 0;
+                width: 100%;
+                height: 1px;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .connecting-duck {
+        @apply absolute inset-0 m-auto;
+        background: url('@/assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
+        width: 235px;
+        height: 127px;
+        animation: connecting-duck 1.5s infinite step-end;
+        transform: scale(0.5);
+    }
+
+    @keyframes connecting-duck {
+        0% {
+          background-position: 0 0;
+          width: 235px;
+          height: 127px;
+        }
+        15% {
+          background-position: 0 -132px;
+          width: 280px;
+          height: 151px;
+        }
+        30% {
+          background-position: 0 -288px;
+          width: 326px;
+          height: 174px;
+        }
+        45% {
+          background-position: 0 -467px;
+          width: 235px;
+          height: 127px;
+        }
+        60% {
+          background-position: 0 -599px;
+          width: 280px;
+          height: 151px;
+        }
+        75% {
+          background-position: 0 -755px;
+          width: 326px;
+          height: 174px;
+        }
+        90% {
+          background-position: 0 -934px;
+          width: 190px;
+          height: 104px;
+        }
+    }
+    
     .avatar-image {
         @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
     }
@@ -277,6 +384,11 @@ body {
             background-image: url("@/assets/images/chat/styles-icon.png");
             width: 17px;
             height: 19px;
+            filter: grayscale(100%);
+
+            &:hover {
+                filter: grayscale(0%);
+            }
         }
 
         &.pencil-icon {

tailwind.config.js

@@ -15,6 +15,7 @@ const colors = {
     'card-grid-item-active': '#ECECEC',
     'card-grid-item-border': '#B6BEC5',
     'card-grid-item-border-active': '#FFFFFF',
+    'loading': '#393A85'
 };
 
 const boxShadow = {
@@ -39,8 +40,9 @@ module.exports = {
                 'inventory-h': '320px'
             },
             zIndex: {
-                'toolbar': ''
+                'toolbar': '',
-            }
+                'loading': '100'
+            },
         },
     },
     safelist: [