Skeleton (#49)

Author: satelllte

src/components/pages/SynthPage/MidiSelector/MidiSelectorSkeleton.tsx

@@ -1,9 +1,10 @@
+import {Skeleton} from '@/components/ui/Skeleton';
 import {MidiSelectorContainer} from './MidiSelectorContainer';
 
 export function MidiSelectorSkeleton() {
   return (
     <MidiSelectorContainer status='disabled'>
-      <div className='absolute h-full w-full bg-gray-3 motion-safe:animate-pulse' />
+      <Skeleton />
     </MidiSelectorContainer>
   );
 }

src/components/ui/InteractionArea.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import {type ComponentProps} from 'react';
+import {Skeleton} from './Skeleton';
 
 type DivProps = ComponentProps<'div'>;
 
@@ -24,7 +25,7 @@ export function InteractionArea({icon, title, ...rest}: InteractionAreaProps) {
 export function InteractionAreaSkeleton() {
   return (
     <div className={baseClass}>
-      <div className='h-full w-full bg-gray-5 motion-safe:animate-pulse' />
+      <Skeleton />
     </div>
   );
 }

src/components/ui/KnobSkeleton.tsx

@@ -1,16 +1,14 @@
 import clsx from 'clsx';
+import {Skeleton} from './Skeleton';
 
 type KnobSkeletonProps = {
   isLarge?: boolean;
 };
 
 export function KnobSkeleton({isLarge = false}: KnobSkeletonProps) {
   return (
-    <div
-      className={clsx(
-        'bg-gray-3 motion-safe:animate-pulse',
-        isLarge ? 'h-24 w-20' : 'h-20 w-16',
-      )}
-    />
+    <div className={clsx(isLarge ? 'h-24 w-20' : 'h-20 w-16')}>
+      <Skeleton />
+    </div>
   );
 }

src/components/ui/Meter.tsx

@@ -1,15 +1,20 @@
 import clsx from 'clsx';
 import {forwardRef} from 'react';
+import {Skeleton} from './Skeleton';
 
 type CanvasNativeProps = React.ComponentProps<'canvas'>;
 type MeterProps = Omit<CanvasNativeProps, 'className'>;
 
-const baseClass = clsx('absolute h-full w-full bg-gray-3');
+const baseClass = clsx('absolute h-full w-full');
 
 export const Meter = forwardRef<HTMLCanvasElement, MeterProps>((props, ref) => (
-  <canvas ref={ref} className={baseClass} {...props} />
+  <canvas ref={ref} className={clsx(baseClass, 'bg-gray-3')} {...props} />
 ));
 
 export function MeterSkeleton() {
-  return <div className={clsx(baseClass, 'motion-safe:animate-pulse')} />;
+  return (
+    <div className={baseClass}>
+      <Skeleton />
+    </div>
+  );
 }

src/components/ui/Skeleton.tsx

@@ -0,0 +1,7 @@
+/**
+ * Skeleton component with animation.
+ * Takes up the full width and height of its parent.
+ */
+export function Skeleton() {
+  return <div className='h-full w-full bg-gray-3 motion-safe:animate-pulse' />;
+}