From 30cf244610e5d7cfe51363650f5236ded1af0639 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 15 Jul 2021 15:26:34 -0400 Subject: [PATCH] chore: Loading placeholders (#2322) * Improve visual of loading mask * Normalize placeholder naming * Remove unused file --- .../DocumentHistory/DocumentHistory.js | 4 +-- app/components/Flex.js | 2 +- app/components/List/Placeholder.js | 11 +++---- .../LoadingPlaceholder/ListPlaceholder.js | 30 ------------------- app/components/LoadingPlaceholder/index.js | 6 ---- app/components/PaginatedList.js | 4 +-- ...gPlaceholder.js => PlaceholderDocument.js} | 13 ++++---- .../{Mask.js => PlaceholderText.js} | 26 +++++++++------- .../Sidebar/components/Collections.js | 4 +-- .../Sidebar/components/CollectionsLoading.js | 21 ------------- .../components/PlaceholderCollections.js | 21 +++++++++++++ app/components/Table.js | 4 +-- app/routes/authenticated.js | 4 +-- app/scenes/Collection.js | 8 ++--- app/scenes/Document/components/Document.js | 4 +-- app/scenes/Document/components/Loading.js | 4 +-- app/scenes/DocumentNew.js | 4 +-- 17 files changed, 70 insertions(+), 100 deletions(-) delete mode 100644 app/components/LoadingPlaceholder/ListPlaceholder.js delete mode 100644 app/components/LoadingPlaceholder/index.js rename app/components/{LoadingPlaceholder/LoadingPlaceholder.js => PlaceholderDocument.js} (55%) rename app/components/{Mask.js => PlaceholderText.js} (59%) delete mode 100644 app/components/Sidebar/components/CollectionsLoading.js create mode 100644 app/components/Sidebar/components/PlaceholderCollections.js diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js index 1f1e6e24..68c8576f 100644 --- a/app/components/DocumentHistory/DocumentHistory.js +++ b/app/components/DocumentHistory/DocumentHistory.js @@ -15,7 +15,7 @@ import RevisionsStore from "stores/RevisionsStore"; import Button from "components/Button"; import Flex from "components/Flex"; -import { ListPlaceholder } from "components/LoadingPlaceholder"; +import PlaceholderList from "components/List/Placeholder"; import Revision from "./components/Revision"; import { documentHistoryUrl, documentUrl } from "utils/routeHelpers"; @@ -120,7 +120,7 @@ class DocumentHistory extends React.Component { {showLoading ? ( - + ) : ( align}; justify-content: ${({ justify }) => justify}; flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")}; - gap: ${({ gap }) => `${gap}px` || "initial"}; + gap: ${({ gap }) => (gap ? `${gap}px` : "initial")}; min-height: 0; min-width: 0; `; diff --git a/app/components/List/Placeholder.js b/app/components/List/Placeholder.js index 8e0a0c9a..4dc72b9a 100644 --- a/app/components/List/Placeholder.js +++ b/app/components/List/Placeholder.js @@ -4,18 +4,19 @@ import * as React from "react"; import styled from "styled-components"; import Fade from "components/Fade"; import Flex from "components/Flex"; -import Mask from "components/Mask"; +import PlaceholderText from "components/PlaceholderText"; type Props = { count?: number, }; -const Placeholder = ({ count }: Props) => { +const ListPlaceHolder = ({ count }: Props) => { return ( {times(count || 2, (index) => ( - + + ))} @@ -23,7 +24,7 @@ const Placeholder = ({ count }: Props) => { }; const Item = styled(Flex)` - padding: 15px 0 16px; + padding: 10px 0; `; -export default Placeholder; +export default ListPlaceHolder; diff --git a/app/components/LoadingPlaceholder/ListPlaceholder.js b/app/components/LoadingPlaceholder/ListPlaceholder.js deleted file mode 100644 index 8492131d..00000000 --- a/app/components/LoadingPlaceholder/ListPlaceholder.js +++ /dev/null @@ -1,30 +0,0 @@ -// @flow -import { times } from "lodash"; -import * as React from "react"; -import styled from "styled-components"; -import Fade from "components/Fade"; -import Flex from "components/Flex"; -import Mask from "components/Mask"; - -type Props = { - count?: number, -}; - -const ListPlaceHolder = ({ count }: Props) => { - return ( - - {times(count || 2, (index) => ( - - - - - ))} - - ); -}; - -const Item = styled(Flex)` - padding: 10px 0; -`; - -export default ListPlaceHolder; diff --git a/app/components/LoadingPlaceholder/index.js b/app/components/LoadingPlaceholder/index.js deleted file mode 100644 index f5e93ca0..00000000 --- a/app/components/LoadingPlaceholder/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// @flow -import ListPlaceholder from "./ListPlaceholder"; -import LoadingPlaceholder from "./LoadingPlaceholder"; - -export default LoadingPlaceholder; -export { ListPlaceholder }; diff --git a/app/components/PaginatedList.js b/app/components/PaginatedList.js index eb657c68..7deeb9f5 100644 --- a/app/components/PaginatedList.js +++ b/app/components/PaginatedList.js @@ -7,7 +7,7 @@ import * as React from "react"; import { Waypoint } from "react-waypoint"; import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore"; import DelayedMount from "components/DelayedMount"; -import { ListPlaceholder } from "components/LoadingPlaceholder"; +import PlaceholderList from "components/List/Placeholder"; type Props = { fetch?: (options: ?Object) => Promise, @@ -128,7 +128,7 @@ class PaginatedList extends React.Component { )} {showLoading && ( - + )} diff --git a/app/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/components/PlaceholderDocument.js similarity index 55% rename from app/components/LoadingPlaceholder/LoadingPlaceholder.js rename to app/components/PlaceholderDocument.js index 3ab4465b..d3f93d07 100644 --- a/app/components/LoadingPlaceholder/LoadingPlaceholder.js +++ b/app/components/PlaceholderDocument.js @@ -4,18 +4,19 @@ import styled from "styled-components"; import DelayedMount from "components/DelayedMount"; import Fade from "components/Fade"; import Flex from "components/Flex"; -import Mask from "components/Mask"; +import PlaceholderText from "components/PlaceholderText"; -export default function LoadingPlaceholder(props: Object) { +export default function PlaceholderDocument(props: Object) { return ( - + +
- - - + + + diff --git a/app/components/Mask.js b/app/components/PlaceholderText.js similarity index 59% rename from app/components/Mask.js rename to app/components/PlaceholderText.js index ce407c74..beccbfdd 100644 --- a/app/components/Mask.js +++ b/app/components/PlaceholderText.js @@ -10,36 +10,40 @@ type Props = {| height?: number, minWidth?: number, maxWidth?: number, + delay?: number, |}; -class Mask extends React.Component { - width: number; +class PlaceholderText extends React.Component { + width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100); shouldComponentUpdate() { return false; } - constructor(props: Props) { - super(); - this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100); - } - render() { - return ; + return ( + + ); } } -const Redacted = styled(Flex)` +const Mask = styled(Flex)` width: ${(props) => (props.header ? props.width / 2 : props.width)}%; height: ${(props) => props.height ? props.height : props.header ? 24 : 18}px; margin-bottom: 6px; + border-radius: 6px; background-color: ${(props) => props.theme.divider}; - animation: ${pulsate} 1.3s infinite; + animation: ${pulsate} 2s infinite; + animation-delay: ${(props) => props.delay || 0}s; &:last-child { margin-bottom: 0; } `; -export default Mask; +export default PlaceholderText; diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js index b2ce303a..3517b7a1 100644 --- a/app/components/Sidebar/components/Collections.js +++ b/app/components/Sidebar/components/Collections.js @@ -9,9 +9,9 @@ import Fade from "components/Fade"; import Flex from "components/Flex"; import useStores from "../../../hooks/useStores"; import CollectionLink from "./CollectionLink"; -import CollectionsLoading from "./CollectionsLoading"; import DropCursor from "./DropCursor"; import Header from "./Header"; +import PlaceholderCollections from "./PlaceholderCollections"; import SidebarLink from "./SidebarLink"; import useCurrentTeam from "hooks/useCurrentTeam"; type Props = { @@ -105,7 +105,7 @@ function Collections({ onCreateCollection }: Props) { return (
{t("Collections")}
- + ); } diff --git a/app/components/Sidebar/components/CollectionsLoading.js b/app/components/Sidebar/components/CollectionsLoading.js deleted file mode 100644 index d2a9c995..00000000 --- a/app/components/Sidebar/components/CollectionsLoading.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import * as React from "react"; -import styled from "styled-components"; -import Mask from "components/Mask"; - -function CollectionsLoading() { - return ( - - - - - - ); -} - -const Wrapper = styled.div` - margin: 4px 16px; - width: 75%; -`; - -export default CollectionsLoading; diff --git a/app/components/Sidebar/components/PlaceholderCollections.js b/app/components/Sidebar/components/PlaceholderCollections.js new file mode 100644 index 00000000..8b6375a2 --- /dev/null +++ b/app/components/Sidebar/components/PlaceholderCollections.js @@ -0,0 +1,21 @@ +// @flow +import * as React from "react"; +import styled from "styled-components"; +import PlaceholderText from "components/PlaceholderText"; + +function PlaceholderCollections() { + return ( + + + + + + ); +} + +const Wrapper = styled.div` + margin: 4px 16px; + width: 75%; +`; + +export default PlaceholderCollections; diff --git a/app/components/Table.js b/app/components/Table.js index f47cdfce..c229ee45 100644 --- a/app/components/Table.js +++ b/app/components/Table.js @@ -8,7 +8,7 @@ import styled from "styled-components"; import Button from "components/Button"; import Empty from "components/Empty"; import Flex from "components/Flex"; -import Mask from "components/Mask"; +import PlaceholderText from "components/PlaceholderText"; export type Props = {| data: any[], @@ -170,7 +170,7 @@ export const Placeholder = ({ {new Array(columns).fill().map((_, col) => ( - + ))} diff --git a/app/routes/authenticated.js b/app/routes/authenticated.js index 9f7b60f4..8e5201cd 100644 --- a/app/routes/authenticated.js +++ b/app/routes/authenticated.js @@ -14,7 +14,7 @@ import Trash from "scenes/Trash"; import CenteredContent from "components/CenteredContent"; import Layout from "components/Layout"; -import LoadingPlaceholder from "components/LoadingPlaceholder"; +import PlaceholderDocument from "components/PlaceholderDocument"; import Route from "components/ProfiledRoute"; import SocketProvider from "components/SocketProvider"; import { matchDocumentSlug as slug } from "utils/routeHelpers"; @@ -43,7 +43,7 @@ export default function AuthenticatedRoutes() { - + } > diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js index 7f361c55..1099eaf4 100644 --- a/app/scenes/Collection.js +++ b/app/scenes/Collection.js @@ -27,11 +27,11 @@ import Flex from "components/Flex"; import Heading from "components/Heading"; import HelpText from "components/HelpText"; import InputSearchPage from "components/InputSearchPage"; +import PlaceholderList from "components/List/Placeholder"; import LoadingIndicator from "components/LoadingIndicator"; -import { ListPlaceholder } from "components/LoadingPlaceholder"; -import Mask from "components/Mask"; import Modal from "components/Modal"; import PaginatedDocumentList from "components/PaginatedDocumentList"; +import PlaceholderText from "components/PlaceholderText"; import Scene from "components/Scene"; import Subheading from "components/Subheading"; import Tab from "components/Tab"; @@ -376,9 +376,9 @@ function CollectionScene() { ) : ( - + - + ); } diff --git a/app/scenes/Document/components/Document.js b/app/scenes/Document/components/Document.js index 03a65ba7..bb74863a 100644 --- a/app/scenes/Document/components/Document.js +++ b/app/scenes/Document/components/Document.js @@ -18,10 +18,10 @@ import Branding from "components/Branding"; import ErrorBoundary from "components/ErrorBoundary"; import Flex from "components/Flex"; import LoadingIndicator from "components/LoadingIndicator"; -import LoadingPlaceholder from "components/LoadingPlaceholder"; import Modal from "components/Modal"; import Notice from "components/Notice"; import PageTitle from "components/PageTitle"; +import PlaceholderDocument from "components/PlaceholderDocument"; import Time from "components/Time"; import Container from "./Container"; import Contents from "./Contents"; @@ -410,7 +410,7 @@ class DocumentScene extends React.Component { )} )} - }> + }> {showContents && } - + ); diff --git a/app/scenes/DocumentNew.js b/app/scenes/DocumentNew.js index bceca9e1..14a57447 100644 --- a/app/scenes/DocumentNew.js +++ b/app/scenes/DocumentNew.js @@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next"; import { useHistory, useLocation, useRouteMatch } from "react-router-dom"; import CenteredContent from "components/CenteredContent"; import Flex from "components/Flex"; -import LoadingPlaceholder from "components/LoadingPlaceholder"; +import PlaceholderDocument from "components/PlaceholderDocument"; import useStores from "hooks/useStores"; import { editDocumentUrl } from "utils/routeHelpers"; @@ -48,7 +48,7 @@ function DocumentNew() { return ( - + );