fix contentplaceholder

textkernel · Jun 23, 2021 · 324eb96 · 324eb96
1 parent d019db1
commit 324eb96
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/components/WeightedResultBar/WeightedResultBar.scss b/src/components/WeightedResultBar/WeightedResultBar.scss
@@ -7,5 +7,11 @@
         margin-bottom: var(--spacing-2x);
         display: flex;
         justify-content: space-between;
+        align-items: center;
+    }
+
+    &__placeholder {
+        margin-bottom: 0;
+        flex-grow: 2;
     }
 }
diff --git a/src/components/WeightedResultBar/WeightedResultBar.tsx b/src/components/WeightedResultBar/WeightedResultBar.tsx
@@ -28,15 +28,19 @@ export const WeightedResultBar: React.FC<Props> = (props) => {
         <div {...rest} {...block(props)}>
             <div {...elem('details', props)}>
                 {isLoading ? (
-                    <ContentPlaceholder height={15} width={Math.floor(Math.random() * 60) + 25} />
+                    <ContentPlaceholder
+                        {...elem('placeholder', props)}
+                        height={17}
+                        width={Math.floor(Math.random() * 60) + 25}
+                    />
                 ) : (
                     <Text inline>{children}</Text>
                 )}
                 {['number', 'string'].includes(typeof count) ? <Text inline>{count}</Text> : count}
             </div>
             <ProgressBar
-                percentage={isLoading ? 0 : percentage}
-                context={isLoading ? undefined : context}
+                percentage={isLoading ? 100 : percentage}
+                context={isLoading ? 'neutral' : context}
                 small
             />
         </div>

diff --git a/src/components/WeightedResultBar/__tests__/WeightedResultBar.spec.js b/src/components/WeightedResultBar/__tests__/WeightedResultBar.spec.js
@@ -36,6 +36,7 @@ describe('WeightedResultBar', () => {
         const wrapper = shallow(<WeightedResultBar isLoading />);
 
         expect(wrapper.find('ContentPlaceholder').length).toBe(1);
-        expect(wrapper.find('ProgressBar').prop('percentage')).toBe(0);
+        expect(wrapper.find('ProgressBar').prop('percentage')).toBe(100);
+        expect(wrapper.find('ProgressBar').prop('context')).toBe('neutral');
     });
 });