chore: swap loading component for react-spinner

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

package.json

@@ -14,6 +14,7 @@
     "react-feather": "^1.1.6",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "react-spinners": "^0.5.3",
     "recompose": "^0.30.0"
   },
   "scripts": {

public/index.html

@@ -13,6 +13,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/Icon/Icon.js

@@ -1,16 +1,17 @@
-import React from "react";
-import styled from "@emotion/styled";
+import React from "react"
+import styled from "@emotion/styled"
 import {
   Book,
   Calendar,
   ChevronLeft,
   ChevronRight,
   Circle,
+  Edit2,
   Moon,
   Sun,
-  User
-} from "react-feather";
-import { withTheme } from "emotion-theming";
+  User,
+} from "react-feather"
+import { withTheme } from "emotion-theming"
 
 const IconBase = styled.div`
   display: flex;
@@ -25,7 +26,7 @@ const IconBase = styled.div`
     background-color: ${props => !props.disabled && props.theme.colors.hover};
     cursor: pointer;
   }
-`;
+`
 
 const Icon = ({ name, ...rest }) => (
   <IconBase {...rest}>
@@ -38,6 +39,6 @@ const Icon = ({ name, ...rest }) => (
     {name === "Sun" && <Sun />}
     {name === "User" && <User />}
   </IconBase>
-);
+)
 
-export default withTheme(Icon);
+export default withTheme(Icon)

src/components/screens/Day/Day.js

@@ -6,6 +6,7 @@ import { withTheme } from "emotion-theming";
 import { withFirebase } from "../../firebase";
 import { withAuthentication } from "../../session";
 import { addDays, subDays, format, isAfter, startOfYesterday } from "date-fns";
+import { BeatLoader } from "react-spinners";
 
 import { SIZES } from "../../../styles/constants";
 
@@ -145,7 +146,8 @@ class Day extends Component {
     const {
       match: {
         params: { year, month, day }
-      }
+      },
+      theme
     } = this.props;
     const { text, loading } = this.state;
     const currentDay = new Date(year, month - 1, day);
@@ -161,7 +163,10 @@ class Day extends Component {
         />
         <JournalHeading>RECORD THOUGHTS ABOUT YOUR DAY</JournalHeading>
         {loading ? (
-          <JournalEntryArea disabled placeholder="Loading..." />
+          // <JournalEntryArea disabled placeholder="Loading..." />
+          <div style={{ marginTop: 10 }}>
+            <BeatLoader color={theme.colors.tertiary} size={10} margin="4px" />
+          </div>
         ) : (
           <JournalEntryArea
             placeholder="Start writing..."

yarn.lock

@@ -878,7 +878,7 @@
     "@emotion/utils" "0.11.1"
     "@emotion/weak-memoize" "0.2.2"
 
-"@emotion/core@^10.0.10":
+"@emotion/core@^10.0.10", "@emotion/core@^10.0.4":
   version "10.0.10"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.10.tgz#8d3114e5a2f8b178a7067c603a2937516f180b08"
   integrity sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==
@@ -8229,7 +8229,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8571,6 +8571,15 @@ react-scripts@2.1.8:
   optionalDependencies:
     fsevents "1.2.4"
 
+react-spinners@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.5.3.tgz#b4fa956da9674f3300442cef10186de7d749099c"
+  integrity sha512-5erLzg/7uduB0rbO2CAvi8seg1FJ98dQhYxWoBgjU8XNnfb45RF1eARUemMwjtRQ3b5zZ9JVK4+AQtlHOK4ksQ==
+  dependencies:
+    "@emotion/core" "^10.0.4"
+    prop-types "^15.5.10"
+    recompose "0.27.1 - 0.30.0"
+
 react@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
@@ -8653,7 +8662,7 @@ realpath-native@^1.0.0:
   dependencies:
     util.promisify "^1.0.0"
 
-recompose@^0.30.0:
+"recompose@0.27.1 - 0.30.0", recompose@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
   integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==