Add loading indicator

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-helper-plugin/lib/src/components/HeaderSearch/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ClearIcon from '../../svgs/Clear';
 import SearchIcon from '../../svgs/Search';
 import SearchInfo from '../SearchInfo';
 import Clear from './Clear';
-import ClearIcon from './ClearIcon';
 import Wrapper from './Wrapper';
 
 const HeaderSearch = ({ label, onChange, onClear, placeholder, value }) => {

packages/strapi-helper-plugin/lib/src/index.js

@@ -105,6 +105,7 @@ export { default as getYupInnerErrors } from './utils/getYupInnerErrors';
 
 // SVGS
 export { default as LayoutIcon } from './svgs/Layout';
+export { default as ClearIcon } from './svgs/Clear';
 export { default as Close } from './svgs/Close';
 export { default as FilterIcon } from './svgs/Filter';
 export { default as SearchIcon } from './svgs/Search';

packages/strapi-helper-plugin/lib/src/svgs/Clear/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ClearIcon = ({ fill, height, width, ...rest }) => {
+const Clear = ({ fill, height, width, ...rest }) => {
   return (
     <svg
       {...rest}
@@ -18,16 +18,16 @@ const ClearIcon = ({ fill, height, width, ...rest }) => {
   );
 };
 
-ClearIcon.defaultProps = {
+Clear.defaultProps = {
   fill: '#b3b5b9',
   height: '8',
   width: '8',
 };
 
-ClearIcon.propTypes = {
+Clear.propTypes = {
   fill: PropTypes.string,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
-export default ClearIcon;
+export default Clear;

packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 const CardImgWrapper = styled.div`
+  position: relative;
   height: ${({ isSmall }) => (isSmall ? '127px' : '156px')};
   min-width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
   border-radius: 2px;

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Button.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  margin-top: 11px;
+  color: #b3b5b9;
+  font-weight: 500;
+  font-size: 11px;
+
+  &:active {
+    outline: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  > svg {
+    margin-top: -1px;
+    margin-left: 10px;
+  }
+`;
+
+export default Button;

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Indicator.js

@@ -0,0 +1,44 @@
+import styled, { keyframes } from 'styled-components';
+
+const loading = keyframes`
+from {
+  left: -100px;
+    width: 30%;
+}
+50% {
+  width: 30%;
+}
+70% {
+  width: 70%;
+}
+80% {
+  left: 50%;
+}
+95% {
+  left: 120%;
+}
+to {
+  left: 100%;
+}
+`;
+
+const Indicator = styled.div`
+  position: relative;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background-color: #515764;
+  border-radius: 2px;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: -100px;
+    width: 100px;
+    height: 4px;
+    background-color: #b3b5b9;
+    animation: ${loading} 2s linear infinite;
+  }
+`;
+
+export default Indicator;

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: calc(50% - 2px);
+  left: calc(50% - 22%);
+  width: 44%;
+
+  text-align: center;
+`;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ClearIcon } from 'strapi-helper-plugin';
+import Button from './Button';
+import Indicator from './Indicator';
+import Wrapper from './Wrapper';
+
+const InfiniteLoadingIndicator = () => {
+  return (
+    <Wrapper>
+      <Indicator />
+      <Button type="button">
+        Cancel
+        <ClearIcon />
+      </Button>
+    </Wrapper>
+  );
+};
+
+export default InfiniteLoadingIndicator;

packages/strapi-plugin-upload/admin/src/components/UploadList/index.js

@@ -7,6 +7,7 @@ import { Button } from '@buffetjs/core';
 import createMatrix from '../../utils/createMatrix';
 import getTrad from '../../utils/getTrad';
 import CardImgWrapper from '../CardImgWrapper';
+import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
 import HeaderWrapper from './HeaderWrapper';
 
 const UploadList = ({ filesToUpload, onGoToAddBrowseFiles }) => {
@@ -49,7 +50,12 @@ const UploadList = ({ filesToUpload, onGoToAddBrowseFiles }) => {
       <ModalBody>
         <div
           className="container"
-          style={{ marginTop: -4, overflow: 'auto', maxHeight: 450 }}
+          style={{
+            marginTop: -4,
+            marginBottom: 4,
+            overflow: 'auto',
+            maxHeight: 350,
+          }}
         >
           {matrix.map((row, i) => {
             return (
@@ -58,7 +64,9 @@ const UploadList = ({ filesToUpload, onGoToAddBrowseFiles }) => {
                   return (
                     <div className="col-3" key={j}>
                       <div>
-                        <CardImgWrapper isSmall />
+                        <CardImgWrapper isSmall>
+                          {content.isUploading && <InfiniteLoadingIndicator />}
+                        </CardImgWrapper>
                         <p style={{ marginBottom: 14 }}>{content.file.name}</p>
                       </div>
                     </div>