feat: Add 'done' icon when all tasks are complete

app/components/DocumentTasks.js

@@ -1,8 +1,12 @@
 // @flow
+import { DoneIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
 import CircularProgressBar from "components/CircularProgressBar";
+import usePrevious from "../hooks/usePrevious";
 import Document from "../models/Document";
+import { bounceIn } from "styles/animations";
 
 type Props = {|
   document: Document,
@@ -24,16 +28,32 @@ function getMessage(t, total, completed) {
 function DocumentTasks({ document }: Props) {
   const { tasks, tasksPercentage } = document;
   const { t } = useTranslation();
+  const theme = useTheme();
   const { completed, total } = tasks;
-
+  const done = completed === total;
+  const previousDone = usePrevious(done);
   const message = getMessage(t, total, completed);
 
   return (
     <>
-      <CircularProgressBar percentage={tasksPercentage} />
+      {completed === total ? (
+        <Done
+          color={theme.primary}
+          size={20}
+          $animated={done && previousDone === false}
+        />
+      ) : (
+        <CircularProgressBar percentage={tasksPercentage} />
+      )}
       &nbsp;{message}
     </>
   );
 }
 
+const Done = styled(DoneIcon)`
+  margin: -1px;
+  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
+  transform-origin: center center;
+`;
+
 export default DocumentTasks;

package.json

@@ -111,7 +111,7 @@
     "mobx-react": "^6.3.1",
     "natural-sort": "^1.0.0",
     "nodemailer": "^6.4.16",
-    "outline-icons": "^1.27.2",
+    "outline-icons": "^1.30.0",
     "oy-vey": "^0.10.0",
     "passport": "^0.4.1",
     "passport-google-oauth2": "^0.2.0",

yarn.lock

@@ -9791,10 +9791,10 @@ os-name@^3.1.0:
     macos-release "^2.2.0"
     windows-release "^3.1.0"
 
-outline-icons@^1.26.1, outline-icons@^1.27.2:
-  version "1.27.2"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.27.2.tgz#9ff2ba209ba77a94f6a2a19ae0cbee403973d7c2"
-  integrity sha512-cvvJ3Ockcqsj5zphTCK5OzKGBMXmFVCe0OhuiNdtt1gVS+/yAE2fIs93RlW2ERIEIDsAlWrK6oBvDFpIgEHiQw==
+outline-icons@^1.26.1, outline-icons@^1.30.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.30.0.tgz#e6bb779d43fc89df4b7bda8dfe886c28c72e494d"
+  integrity sha512-JLL0hiBB7cKBrpQ7ejvLORUVYNpx2ULngoWJHL8vpsMwMha+ChF7z1MmJQ1dD6/yDX3dgIzeMfMASD8weVRloQ==
 
 oy-vey@^0.10.0:
   version "0.10.0"