Fix style for narrow queue itme loader

nukeop · Oct 19, 2022 · b2a752d · b2a752d
1 parent 764d641
commit b2a752d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/ui/lib/components/Loader/index.tsx b/packages/ui/lib/components/Loader/index.tsx
@@ -6,16 +6,19 @@ import styles from './styles.scss';
 
 type LoaderProps = {
   type: 'default' | 'circle' | 'small';
+  className?: string;
 }
 
 const Loader: React.FC<LoaderProps> = ({
-  type='default'
+  type='default',
+  className
 }) => {
   return (
     <span className={cx(
       common.nuclear,
       type,
-      styles.loader
+      styles.loader,
+      className
     )}>
       <span />
       <span />

diff --git a/packages/ui/lib/components/QueueItem/index.jsx b/packages/ui/lib/components/QueueItem/index.jsx
@@ -36,7 +36,7 @@ export const QueueItem = ({
     <div className={styles.thumbnail}>
       {
         isLoading
-          ? <Loader type='small' />
+          ? <Loader type='small' className={isCompact && styles.compact_loader} />
           : <img src={_.defaultTo(track.thumbnail, artPlaceholder)} />
       }
 

diff --git a/packages/ui/lib/components/QueueItem/styles.scss b/packages/ui/lib/components/QueueItem/styles.scss
@@ -90,6 +90,15 @@
       height: 100%;
       width: 100%;
     }
+
+    .compact_loader {
+      width: 100%;
+      height: 100%;
+
+      span {
+        border-width: 4px;
+      }
+    }
   }
 
   .error_overlay {

diff --git a/packages/ui/stories/components/queueItem.stories.tsx b/packages/ui/stories/components/queueItem.stories.tsx
@@ -60,7 +60,7 @@ storiesOf('Components/Queue item', module)
   .add('Compact', () => (
     <div className='bg'>
       <div
-        style={{ width: '4rem' }}
+        style={{ width: '2.5rem' }}
       >
         <QueueItem {...commonProps} isCompact />
         <QueueItem {...commonProps}
@@ -87,7 +87,7 @@ storiesOf('Components/Queue item', module)
         }}
       />
       <div
-        style={{ width: '3rem' }}
+        style={{ width: '2.5rem' }}
       >
         <QueueItem {...commonProps}
           isCompact