chore: Loading placeholders (#2322)

* Improve visual of loading mask

* Normalize placeholder naming

* Remove unused file

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() {
   ) : (
     <CenteredContent>
       <Heading>
-        <Mask height={35} />
+        <PlaceholderText height={35} />
       </Heading>
-      <ListPlaceholder count={5} />
+      <PlaceholderList count={5} />
     </CenteredContent>
   );
 }

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<Props> {
                   )}
                 </Notice>
               )}
-              <React.Suspense fallback={<LoadingPlaceholder />}>
+              <React.Suspense fallback={<PlaceholderDocument />}>
                 <Flex auto={!readOnly}>
                   {showContents && <Contents headings={headings} />}
                   <Editor

app/scenes/Document/components/Loading.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import CenteredContent from "components/CenteredContent";
-import LoadingPlaceholder from "components/LoadingPlaceholder";
 import PageTitle from "components/PageTitle";
+import PlaceholderDocument from "components/PlaceholderDocument";
 import Container from "./Container";
 import type { LocationWithState } from "types";
 
@@ -20,7 +20,7 @@ export default function Loading({ location }: Props) {
         title={location.state ? location.state.title : t("Untitled")}
       />
       <CenteredContent>
-        <LoadingPlaceholder />
+        <PlaceholderDocument />
       </CenteredContent>
     </Container>
   );

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 (
     <Flex column auto>
       <CenteredContent>
-        <LoadingPlaceholder />
+        <PlaceholderDocument />
       </CenteredContent>
     </Flex>
   );