chore: Loading placeholders (#2322)

* Improve visual of loading mask

* Normalize placeholder naming

* Remove unused file

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 (
       <Flex column>
         <Header>{t("Collections")}</Header>
-        <CollectionsLoading />
+        <PlaceholderCollections />
       </Flex>
     );
   }

app/components/Sidebar/components/CollectionsLoading.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import Mask from "components/Mask";
-
-function CollectionsLoading() {
-  return (
-    <Wrapper>
-      <Mask />
-      <Mask />
-      <Mask />
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 4px 16px;
-  width: 75%;
-`;
-
-export default CollectionsLoading;

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 (
+    <Wrapper>
+      <PlaceholderText />
+      <PlaceholderText delay={0.2} />
+      <PlaceholderText delay={0.4} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 4px 16px;
+  width: 75%;
+`;
+
+export default PlaceholderCollections;