fix: skeleton style (#646)

src/core/providers/UiKitProvider/styles.tsx

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-import skeletonCss from 'react-loading-skeleton/dist/skeleton.css?inline';
-
 export const UIStyles = styled.div`
   color-scheme: only light;
   ${({ theme }) => theme.typography.body};
@@ -30,5 +28,52 @@ export const UIStyles = styled.div`
     }
   }
 
-  ${skeletonCss}
+  .react-loading-skeleton {
+    --base-color: #ebebeb;
+    --highlight-color: #f5f5f5;
+    --animation-duration: 1.5s;
+    --animation-direction: normal;
+    --pseudo-element-display: block; /* Enable animation */
+
+    background-color: var(--base-color);
+
+    width: 100%;
+    border-radius: 0.25rem;
+    display: inline-flex;
+    line-height: 1;
+
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+  }
+
+  .react-loading-skeleton::after {
+    content: ' ';
+    display: var(--pseudo-element-display);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+      90deg,
+      var(--base-color),
+      var(--highlight-color),
+      var(--base-color)
+    );
+    transform: translateX(-100%);
+
+    animation-name: react-loading-skeleton;
+    animation-direction: var(--animation-direction);
+    animation-duration: var(--animation-duration);
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+
+  @media (prefers-reduced-motion) {
+    .react-loading-skeleton {
+      --pseudo-element-display: none; /* Disable animation */
+    }
+  }
 `;

src/global.d.ts

@@ -14,6 +14,11 @@ interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
 
+declare module '*skeleton.css' {
+  const classes: string;
+  export default classes;
+}
+
 declare module '*.css?inline' {
   const classes: string;
   export default classes;