Replace react-loading-skeleton with custom tailwind component (#898)

Author: terror

client/src/app.tsx

@@ -1,4 +1,3 @@
-import 'react-loading-skeleton/dist/skeleton.css';
 import { Route, Routes } from 'react-router-dom';
 
 import { PrivateRoute } from './components/private-route';

client/src/components/skeleton.test.tsx

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react';
+
+import { Skeleton } from './skeleton';
+
+describe('Skeleton', () => {
+  it('renders a single skeleton by default', () => {
+    const { container } = render(<Skeleton />);
+
+    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(1);
+  });
+
+  it('renders multiple skeletons when count is specified', () => {
+    const { container } = render(<Skeleton count={5} />);
+
+    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(5);
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Skeleton className='mb-2 rounded-lg' />);
+
+    expect(container.querySelector('.animate-pulse')).toHaveClass(
+      'rounded-lg',
+      'mb-2'
+    );
+  });
+
+  it('applies width and height styles', () => {
+    const { container } = render(<Skeleton width={200} height={100} />);
+
+    expect(container.querySelector('.animate-pulse')).toHaveStyle({
+      width: '200px',
+      height: '100px',
+    });
+  });
+});

client/src/components/skeleton.tsx

@@ -0,0 +1,21 @@
+type SkeletonProps = {
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  count?: number;
+};
+
+export const Skeleton = ({
+  width,
+  height,
+  className = '',
+  count = 1,
+}: SkeletonProps) => {
+  return Array.from({ length: count }, (_, i) => (
+    <div
+      key={i}
+      className={`animate-pulse bg-slate-50 dark:bg-neutral-800 ${className}`}
+      style={{ width, height }}
+    />
+  ));
+};

client/src/pages/explore.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';
 
 import { CourseCard } from '../components/course-card';
@@ -10,8 +9,8 @@ import { FilterToggle } from '../components/filter-toggle';
 import { JumpToTopButton } from '../components/jump-to-top-button';
 import { Layout } from '../components/layout';
 import { SearchBar } from '../components/search-bar';
+import { Skeleton } from '../components/skeleton';
 import { Spinner } from '../components/spinner';
-import { useDarkMode } from '../hooks/use-dark-mode';
 import { useExploreFilterState } from '../hooks/use-explore-filter-state';
 import { api } from '../lib/api';
 import type { Course } from '../lib/types';
@@ -66,8 +65,6 @@ export const Explore = () => {
   const [query, setQuery] = useState<string>('');
   const [searchSelected, setSearchSelected] = useState<boolean>(false);
 
-  const [darkMode] = useDarkMode();
-
   const { selectedSubjects, selectedLevels, selectedTerms, sortBy } =
     useExploreFilterState();
 
@@ -196,16 +193,9 @@ export const Explore = () => {
                 ) : (
                   <div className='mx-2'>
                     <Skeleton
-                      baseColor={
-                        darkMode ? 'rgb(38 38 38)' : 'rgb(248 250 252)'
-                      }
                       className='mb-2 rounded-lg first:mt-2'
                       count={10}
-                      duration={2}
                       height={256}
-                      highlightColor={
-                        darkMode ? 'rgb(64 64 64)' : 'rgb(226 232 240)'
-                      }
                     />
                   </div>
                 )}

package.json

@@ -34,7 +34,6 @@
     "react-error-boundary": "^6.0.3",
     "react-helmet-async": "^2.0.5",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^6.30.1",
     "react-vis-graph-wrapper": "^0.1.3",
     "recharts": "^3.6.0",