marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-16 04:29:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: loading screen

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-26 01:09:03 +01:00
parent 84b6efccd0
commit adc114adcf
3 changed files with 82 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
.idea/workspace.xml generated
View File

@@ -4,8 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: make tool responsive">
<change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: make tool examples responsive">
<change afterPath="$PROJECT_DIR$/src/components/Loading.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Loading.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Loading.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/config/routesConfig.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/routesConfig.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -193,14 +196,6 @@
<workItem from="1719339559458" duration="303000" />
<workItem from="1719340295244" duration="772000" />
</task>
<task id="LOCAL-00014" summary="fix: readme">
<option name="closed" value="true" />
<created>1719006274218</created>
<option name="number" value="00014" />
<option name="presentableId" value="LOCAL-00014" />
<option name="project" value="LOCAL" />
<updated>1719006274218</updated>
</task>
<task id="LOCAL-00015" summary="ubf">
<option name="closed" value="true" />
<created>1719006515710</created>
@@ -585,7 +580,15 @@
<option name="project" value="LOCAL" />
<updated>1719359243294</updated>
</task>
<option name="localTasksCounter" value="63" />
<task id="LOCAL-00063" summary="chore: make tool examples responsive">
<option name="closed" value="true" />
<created>1719359368236</created>
<option name="number" value="00063" />
<option name="presentableId" value="LOCAL-00063" />
<option name="project" value="LOCAL" />
<updated>1719359368236</updated>
</task>
<option name="localTasksCounter" value="64" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -606,7 +609,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="feat: contributors graph" />
<MESSAGE value="feat: create tool script" />
<MESSAGE value="fix: missing files" />
<MESSAGE value="fix: create tool" />
@@ -631,7 +633,8 @@
<MESSAGE value="fix: merging branches" />
<MESSAGE value="feat: make responsive" />
<MESSAGE value="feat: make tool responsive" />
<option name="LAST_COMMIT_MESSAGE" value="feat: make tool responsive" />
<MESSAGE value="chore: make tool examples responsive" />
<option name="LAST_COMMIT_MESSAGE" value="chore: make tool examples responsive" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

51
src/components/Loading.css Normal file
View File

@@ -0,0 +1,51 @@
#spinner {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
width: 56px;
}
#spinner > div {
width: 12px;
height: 12px;
background-color: #1e96f7;
border-radius: 100%;
display: inline-block;
-webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
animation: fuse-bouncedelay 1s infinite ease-in-out both;
}
#spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes fuse-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes fuse-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

42
src/components/Loading.tsx
View File

@@ -1,32 +1,20 @@
import Typography from '@mui/material/Typography';
import { useState } from 'react';
import Box from '@mui/material/Box';
import { useTimeout } from '../hooks';
export type FuseLoadingProps = {
delay?: number;
className?: string;
};
/**
* FuseLoading displays a loading state with an optional delay
*/
function FuseLoading(props: FuseLoadingProps) {
const { delay = 0, className } = props;
const [showLoading, setShowLoading] = useState(!delay);
useTimeout(() => {
setShowLoading(true);
}, delay);
import './Loading.css';
function Loading() {
return (
<div>
<Typography
className="text-13 sm:text-20 -mb-16 font-medium"
color="text.secondary"
>
Loading
</Typography>
<Box
sx={{
width: '100%',
height: 0.8 * window.innerHeight,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Typography color="primary">Loading</Typography>
<Box
id="spinner"
sx={{
@@ -39,8 +27,8 @@ function FuseLoading(props: FuseLoadingProps) {
<div className="bounce2" />
<div className="bounce3" />
</Box>
</div>
</Box>
);
}
export default FuseLoading;
export default Loading;