feat: file list placeholder

navigation

animation

src/drive/components/FileListPlaceholder.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from '../styles/table'
+
+// using a seeded PRNG to prevent re-renders from changing the results
+const seededRandom = seed => {
+  const x = Math.sin(seed) * 10000
+  return x - Math.floor(x)
+}
+const seededRandomBetween = (min, max, seed) =>
+  min + seededRandom(seed) * (max - min)
+
+const PlaceholderBlock = ({ width }) => (
+  <div className={styles['fil-content-file-placeholder']} style={{ width }} />
+)
+
+PlaceholderBlock.propTypes = {
+  width: PropTypes.string
+}
+
+PlaceholderBlock.defaultProps = {
+  width: '100%'
+}
+
+const FilePlaceholder = ({ index }) => (
+  <div className={styles['fil-content-row']}>
+    <div
+      className={classNames(
+        styles['fil-content-cell'],
+        styles['fil-content-file-select']
+      )}
+    />
+    <div
+      className={classNames(
+        styles['fil-content-cell'],
+        styles['fil-content-file']
+      )}
+    >
+      <PlaceholderBlock width={`${seededRandomBetween(3, 12, index)}rem`} />
+    </div>
+    <div
+      className={classNames(
+        styles['fil-content-cell'],
+        styles['fil-content-date']
+      )}
+    >
+      <PlaceholderBlock width="5rem" />
+    </div>
+    <div
+      className={classNames(
+        styles['fil-content-cell'],
+        styles['fil-content-size']
+      )}
+    >
+      <PlaceholderBlock width={`${seededRandomBetween(3.75, 5, index)}rem`} />
+    </div>
+    <div
+      className={classNames(
+        styles['fil-content-cell'],
+        styles['fil-content-status']
+      )}
+    >
+      <PlaceholderBlock width="1.25rem" />
+    </div>
+  </div>
+)
+
+FilePlaceholder.propTypes = {
+  index: PropTypes.number
+}
+
+FilePlaceholder.defaultProps = {
+  index: 1
+}
+
+const FileListPlaceholder = ({ rows }) => (
+  <div>
+    {[...new Array(rows)].map((value, index) => (
+      <FilePlaceholder index={index} />
+    ))}
+  </div>
+)
+
+FileListPlaceholder.propTypes = {
+  rows: PropTypes.number
+}
+
+FileListPlaceholder.defaultProps = {
+  rows: 8
+}
+
+export default FileListPlaceholder

src/drive/components/FolderContent.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import Spinner from 'cozy-ui/react/Spinner'
+import PropTypes from 'prop-types'
 import Oops from 'components/Error/Oops'
 import { EmptyDrive, EmptyTrash } from 'components/Error/Empty'
+import FileListPlaceholder from './FileListPlaceholder'
 import FileList from './FileList'
-import styles from '../styles/foldercontent'
 
 const EmptyContent = props => {
   const { isTrashContext, canUpload } = props
@@ -13,29 +13,40 @@ const EmptyContent = props => {
   return <EmptyDrive canUpload={canUpload} />
 }
 
+EmptyContent.propTypes = {
+  isTrashContext: PropTypes.bool,
+  canUpload: PropTypes.bool,
+  params: PropTypes.object
+}
+
+EmptyContent.defaultProps = {
+  isTrashContext: false,
+  canUpload: false,
+  params: {}
+}
+
 const FolderContent = props => {
-  const { fetchStatus, files, isAddingFolder } = props
-  switch (fetchStatus) {
-    case 'pending':
-      return (
-        <Spinner
-          size="xxlarge"
-          loadingType="message"
-          middle
-          className={styles['content-spinner']}
-        />
-      )
-    case 'failed':
-      return <Oops />
-    case 'loaded':
-      return files.length === 0 && !isAddingFolder ? (
-        <EmptyContent {...props} />
-      ) : (
-        <FileList withSelectionCheckbox {...props} />
-      )
-    default:
-      return null
-  }
+  const { files, isAddingFolder, isLoading, isInError } = props
+
+  if (isLoading) return <FileListPlaceholder />
+  else if (isInError) return <Oops />
+  else if (files.length === 0 && !isAddingFolder)
+    return <EmptyContent {...props} />
+  else return <FileList withSelectionCheckbox {...props} />
+}
+
+FolderContent.propTypes = {
+  files: PropTypes.array,
+  isAddingFolder: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isInError: PropTypes.bool
+}
+
+FolderContent.defaultProps = {
+  files: [],
+  isAddingFolder: false,
+  isLoading: false,
+  isInError: false
 }
 
 export default FolderContent

src/drive/components/FolderView.jsx

@@ -111,6 +111,8 @@ class FolderView extends Component {
                 {...this.props}
                 selectionModeActive={selectionModeActive}
                 isAddingFolder={showAddFolder}
+                isLoading={fetchPending || isNavigating}
+                isInError={fetchFailed}
               />
             </div>
           </div>

src/drive/components/LightFolderView.jsx

@@ -115,6 +115,8 @@ class DumbFolderView extends React.Component {
               <FolderContent
                 onFileOpen={this.showInViewer}
                 withSelectionCheckbox={false}
+                isLoading={this.props.fetchStatus === 'pending'}
+                isInError={this.props.fetchStatus === 'failed'}
                 {...this.props}
               />
               {viewerOpened && (

src/drive/styles/table.styl

@@ -161,25 +161,57 @@ mime-types('fil-file-', '../assets/icons/')
 
 @keyframes placeHolderShimmer
     0%
-        background-position -29.25rem 0
+        background-position -20rem 0
+    80%
+        background-position 20rem 0
+    80.1%
+        background-position -20rem 0
     100%
-        background-position 29.25rem 0
+        background-position -20rem 0
 
 .fil-content-file-placeholder
-    animation-duration        1s
-    animation-fill-mode       forwards
+    animation-duration        2s
     animation-iteration-count infinite
     animation-name            placeHolderShimmer
     animation-timing-function linear
-    border-radius .1875rem
-    background #f6f7f8
-    background #eeeeee
-    background linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%)
-    background-size 50rem 6.5rem
-    height   1.25rem
-    width    67%
+    background-position -20rem 0
+    background-image linear-gradient(to right, paleGrey 0%, #FCFCFC 50%, paleGrey 100%)
+    background-size 20rem 2.5rem
+    background-repeat no-repeat
+    background-color paleGrey
+    border-radius .15rem
+    height   .75rem
+    max-width    100%
     position relative
 
+.fil-content-file .fil-content-file-placeholder:before
+    content ""
+    display inline-block
+    width   2rem
+    height   2rem
+    background inherit
+    animation inherit
+    border-radius inherit
+    position absolute
+    right 100%
+    top -80%
+    margin-right 1rem
+
+.fil-content-file .fil-content-file-placeholder:before
+    animation-delay 0s
+
+.fil-content-file .fil-content-file-placeholder
+    animation-delay .1s
+
+.fil-content-date .fil-content-file-placeholder
+    animation-delay .5s
+
+.fil-content-size .fil-content-file-placeholder
+    animation-delay .7s
+
+.fil-content-status .fil-content-file-placeholder
+    animation-delay 1.1s
+
 +medium-screen()
     .fil-content-table-selection
         .fil-content-body