Animate appearance of pinned documents

app/components/PinnedDocuments.tsx

@@ -23,6 +23,7 @@ import breakpoint from "styled-components-breakpoint";
 import Pin from "~/models/Pin";
 import DocumentCard from "~/components/DocumentCard";
 import useStores from "~/hooks/useStores";
+import { ResizingHeightContainer } from "./ResizingHeightContainer";
 
 type Props = {
   /** Pins to display */
@@ -97,6 +98,14 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
       modifiers={[restrictToParentElement]}
       collisionDetection={closestCenter}
       onDragEnd={handleDragEnd}
+    >
+      <ResizingHeightContainer
+        config={{
+          transition: {
+            duration: 0.2,
+            ease: "easeInOut",
+          },
+        }}
       >
         <SortableContext items={items} strategy={rectSortingStrategy}>
           <List>
@@ -119,6 +128,7 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
             </AnimatePresence>
           </List>
         </SortableContext>
+      </ResizingHeightContainer>
     </DndContext>
   );
 }

app/scenes/Collection.tsx

@@ -12,6 +12,7 @@ import {
 } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Search from "~/scenes/Search";
 import Badge from "~/components/Badge";
@@ -178,6 +179,7 @@ function CollectionScene() {
                 canUpdate={can.update}
               />
 
+              <Documents>
                 <Tabs>
                   <Tab to={collectionPath(collection.url)} exact>
                     {t("Documents")}
@@ -191,7 +193,10 @@ function CollectionScene() {
                   <Tab to={collectionPath(collection.url, "old")} exact>
                     {t("Least recently updated")}
                   </Tab>
-                <Tab to={collectionPath(collection.url, "alphabetical")} exact>
+                  <Tab
+                    to={collectionPath(collection.url, "alphabetical")}
+                    exact
+                  >
                     {t("A–Z")}
                   </Tab>
                 </Tabs>
@@ -221,7 +226,9 @@ function CollectionScene() {
                     />
                   </Route>
                   <Route path={collectionPath(collection.url, "recent")}>
-                  <Redirect to={collectionPath(collection.url, "published")} />
+                    <Redirect
+                      to={collectionPath(collection.url, "published")}
+                    />
                   </Route>
                   <Route path={collectionPath(collection.url, "published")}>
                     <PaginatedDocumentList
@@ -262,6 +269,7 @@ function CollectionScene() {
                     />
                   </Route>
                 </Switch>
+              </Documents>
             </>
           )}
         </CenteredContent>
@@ -290,6 +298,11 @@ const StarButton = styled(Star)`
   }
 `;
 
+const Documents = styled.div`
+  position: relative;
+  background: ${s("background")};
+`;
+
 const HeadingWithIcon = styled(Heading)<{ $isStarred: boolean }>`
   display: flex;
   align-items: center;

app/scenes/Home.tsx

@@ -3,6 +3,8 @@ import { HomeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Switch, Route } from "react-router-dom";
+import styled from "styled-components";
+import { s } from "@shared/styles";
 import { Action } from "~/components/Actions";
 import Empty from "~/components/Empty";
 import Heading from "~/components/Heading";
@@ -48,6 +50,7 @@ function Home() {
       {!ui.languagePromptDismissed && <LanguagePrompt />}
       <Heading>{t("Home")}</Heading>
       <PinnedDocuments pins={pins.home} canUpdate={canManageTeam} />
+      <Documents>
         <Tabs>
           <Tab to="/home" exact>
             {t("Recently viewed")}
@@ -74,7 +77,9 @@ function Home() {
               options={{
                 user: userId,
               }}
-            empty={<Empty>{t("You haven’t created any documents yet")}</Empty>}
+              empty={
+                <Empty>{t("You haven’t created any documents yet")}</Empty>
+              }
               showCollection
             />
           </Route>
@@ -94,8 +99,14 @@ function Home() {
             />
           </Route>
         </Switch>
+      </Documents>
     </Scene>
   );
 }
 
+const Documents = styled.div`
+  position: relative;
+  background: ${s("background")};
+`;
+
 export default observer(Home);