fade in load to make page load less choppy. hide sidebar when user is not onboarded

Author: TrillCyborg

client/src/components/MainLayout/MainLayout.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { View } from 'react-native'
 import styled from 'styled-components'
+import { useMeQuery } from '../../generated/graphql'
 import Sidebar from './Sidebar'
 import MenuIcon from './MenuIcon'
 
@@ -10,6 +11,19 @@ const Wrapper = styled(View)`
   height: 100%;
   min-height: 100vh;
   background: var(--light-grayish-blue);
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  animation-name: fadeIn;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in;
 `
 
 interface MainLayoutProps {
@@ -19,7 +33,10 @@ interface MainLayoutProps {
 export const SidebarContext = React.createContext({ sidebarOpen: false })
 
 const MainLayout = ({ children }: MainLayoutProps) => {
-  const [sidebarOpen, setSidebarOpen] = React.useState(true)
+  const { data } = useMeQuery()
+
+  const [sidebarOpen, setSidebarOpen] = React.useState(!!(data && data.me && data.me.isOnboarded))
+
   return (
     <SidebarContext.Provider value={{ sidebarOpen }}>
       <Wrapper>