github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 17:26:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

Extract loading screen compontent #69

Browse source
This commit is contained in:
mrdrogdrog 2020-05-24 23:58:28 +02:00 committed by GitHub
parent f185c76c6e
commit 23cfcacd09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/application-loader/application-loader.tsx
View file

@ -1,7 +1,6 @@
import React, {Fragment, useEffect, useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import "./application-loader.scss";
import {Alert} from "react-bootstrap";
import {LoadingScreen} from "./loading-screen";
interface ApplicationLoaderProps {
initTasks: Promise<any>[]
@ -28,17 +27,9 @@ export const ApplicationLoader: React.FC<ApplicationLoaderProps> = ({children, i
})
}, [initTasks]);
return (<Fragment>{
doneTasks < initTasks.length || initTasks.length === 0 ? (
<div className="loader middle">
<div className="icon">
<FontAwesomeIcon icon="file-alt" size="6x"
className={failed ? "animation-shake" : "animation-pulse"}/>
</div>
{
failed ? <Alert variant={"danger"}>An error occured while loading the application!</Alert> : null
}
</div>
) : children
}</Fragment>);
}
return (
doneTasks < initTasks.length || initTasks.length === 0 ?
<LoadingScreen failed={failed}/> :
<Fragment>{children}</Fragment>
);
}

21
src/components/application-loader/loading-screen.tsx Normal file
View file

@ -0,0 +1,21 @@
import React from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Alert} from "react-bootstrap";
export interface LoadingScreenProps {
failed: boolean
}
export const LoadingScreen: React.FC<LoadingScreenProps> = ({failed}) => {
return (
<div className="loader middle">
<div className="icon">
<FontAwesomeIcon icon="file-alt" size="6x"
className={failed ? "animation-shake" : "animation-pulse"}/>
</div>
{
failed ? <Alert variant={"danger"}>An error occured while loading the application!</Alert> : null
}
</div>
)
}