Style loading indicator (#1430)

GoogleForCreators · May 4, 2020 · 800825c · 800825c
1 parent 1f1d853
commit 800825c
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/assets/src/edit-story/components/library/panes/media/mediaPane.js b/assets/src/edit-story/components/library/panes/media/mediaPane.js
@@ -17,6 +17,7 @@
 /**
  * External dependencies
  */
+import { rgba } from 'polished';
 import { useCallback, useRef } from 'react';
 import styled from 'styled-components';
 
@@ -104,6 +105,19 @@ const Inner = styled.div`
     / 1fr;
 `;
 
+const Loading = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 80px;
+  background-color: ${({ theme }) => rgba(theme.colors.bg.v0, 0.4)};
+  border-radius: 100px;
+  font-size: ${({ theme }) => theme.fonts.label.size};
+  line-height: ${({ theme }) => theme.fonts.label.lineHeight};
+  font-weight: 500;
+`;
+
 const FILTERS = [
   { filter: '', name: __('All', 'web-stories') },
   { filter: 'image', name: __('Images', 'web-stories') },
@@ -296,7 +310,11 @@ function MediaPane(props) {
                   />
                 ))}
             </Column>
-            {hasMore && <div ref={refContainerFooter}>{'Loading...'}</div>}
+            {hasMore && (
+              <Loading ref={refContainerFooter}>
+                {__('Loading…', 'web-stories')}
+              </Loading>
+            )}
           </Container>
         )}
       </Inner>