diff --git a/src/components/Shimmer/index.test.tsx b/src/components/Shimmer/index.test.tsx
index ae4dc70..2290e4a 100644
--- a/src/components/Shimmer/index.test.tsx
+++ b/src/components/Shimmer/index.test.tsx
@@ -2,15 +2,14 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
-import Shimmer from '.';
+import Shimmer, { shimmerDataTestIds } from '.';
describe('Shimmer', () => {
- const dataTestId = 'shimmer';
it('renders Shimmer and its components', () => {
const testClass = 'test-class';
- render(
);
+ render(
);
- const shimmer = screen.getByTestId(dataTestId);
+ const shimmer = screen.getByTestId(shimmerDataTestIds.content);
expect(shimmer).toBeVisible();
expect(shimmer).toHaveClass(testClass);
diff --git a/src/components/Shimmer/index.tsx b/src/components/Shimmer/index.tsx
index 7dbe178..0462435 100644
--- a/src/components/Shimmer/index.tsx
+++ b/src/components/Shimmer/index.tsx
@@ -1,18 +1,22 @@
import React from 'react';
+import classNames from 'classnames';
+
interface ShimmerProps {
classAttributes: string;
- 'data-test-id'?: string;
}
+export const shimmerDataTestIds = {
+ content: 'shimmer__content',
+};
+
// Ref: https://delba.dev/blog/animated-loading-skeletons-with-tailwind
-const Shimmer = ({ classAttributes, ...attributes }: ShimmerProps): JSX.Element => {
+const Shimmer = ({ classAttributes }: ShimmerProps): JSX.Element => {
+ const DEFAULT_CLASSNAME_ATTRIBUTES =
+ 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:from-30% before:via-white/50 before:to-transparent before:to-70% isolate overflow-hidden shadow-xl shadow-black/5';
return (
-