chore: swap loading component for react-spinner

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..."