add welcome animation
Change-Id: Ifb08dacd20ee86e66b773cda6de912f698fd3599
diff --git a/client/src/App.js b/client/src/App.js
index bfe707e..6d2284c 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,12 +18,15 @@
import NotFoundPage from "./pages/404.jsx"
import LoadingPage from './components/loading'
import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
+import WelcomeAnimation from './components/welcome'
const App = (props) => {
const [state, setState] = useState({
loaded: false,
auth: authManager.getState()
})
+ const [displayWelcome, setDisplayWelcome] = useState(true)
+
useEffect(() => {
authManager.init(auth => {
setState({ loaded: true, auth })
@@ -31,8 +34,9 @@
return () => authManager.deinit()
}, []);
- if (!state.loaded) {
- return <LoadingPage />
+ console.log("App render")
+ if (displayWelcome) {
+ return <WelcomeAnimation showSetup={!state.auth.setupComplete} onComplete={() => setDisplayWelcome(false)} />
} else if (!state.auth.setupComplete) {
return <Switch>
<Route path="/setup" component={ServerSetup} />
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
new file mode 100644
index 0000000..ff39c0b
--- /dev/null
+++ b/client/src/components/welcome.js
@@ -0,0 +1,41 @@
+import { Button, Container } from '@material-ui/core';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
+import JamiLogo from '../../public/jami-logo-icon.svg'
+
+const list = {
+ hidden: { opacity: 0 },
+ visible: {opacity: 1,
+ transition: {
+ when: "beforeChildren",
+ staggerChildren: 0.3,
+ },
+ }
+}
+const item = {
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: 0 },
+}
+
+export default function WelcomeAnimation(props) {
+ const [visible, setVisible] = useState(true)
+
+ return <Container style={{ textAlign: "center", display:"flex", flexDirection:"column", alignItems:"center" }}>
+ <AnimatePresence>
+ {visible && <motion.div initial="hidden" animate="visible" exit="hidden" variants={list} onAnimationComplete={a => {
+ if (a === "hidden") {
+ props.onComplete()
+ } else if (!props.showSetup) {
+ setVisible(false)
+ }
+ }}>
+ <motion.div variants={item}><JamiLogo size="32px" /></motion.div>
+ <motion.h1 variants={item}>Welcome to Jami</motion.h1>
+ {props.showSetup &&
+ <motion.div variants={item}>
+ <Button variant="outlined" onClick={() => setVisible(false)}>Start setup</Button>
+ </motion.div>}
+ </motion.div>}
+ </AnimatePresence>
+ </Container>
+}
\ No newline at end of file
diff --git a/client/webpack.config.js b/client/webpack.config.js
index beb3a23..022b823 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -71,8 +71,7 @@
},
{
test: /\.svg$/,
- type: 'asset',
- use: 'svgo-loader'
+ use: ['@svgr/webpack']
}
]
},