recloudstream/website
1
0
Fork 0
mirror of https://github.com/recloudstream/website.git synced 2024-08-15 03:18:45 +00:00
Code Issues Projects Releases Packages Wiki Activity

pure css timeout

Browse source
This commit is contained in:
Cloudburst 2022-10-03 10:18:32 +02:00 committed by GitHub
parent 1a1bb27773
commit d7c8baadf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/pages/repos.css Normal file
View file

@ -0,0 +1,19 @@
@keyframes five-s-hide {
0% { display: block; }
80% { display: block; }
100% { display: none; }
}
@keyframes five-s-show {
0% { display: none; }
80% { display: none; }
100% { display: block; }
}
.swap-child:nth-child(1) {
animation: five-s-hide 5s linear;
}
.swap-child:nth-child(2) {
display: none;
animation: five-s-show 5s linear;
}

21
src/pages/repos.js
View file

@ -10,12 +10,14 @@ import { BiErrorAlt } from "react-icons/bi";
import { GoVerified } from "react-icons/go"; import { GoVerified } from "react-icons/go";
import { IconContext } from "react-icons"; import { IconContext } from "react-icons";
import "./repos.css";
const IndexPage = () => { const IndexPage = () => {
const [repos, setRepos] = useState(null); const [repos, setRepos] = useState(null);
const [hadError, setHadError] = useState(false); const [hadError, setHadError] = useState(false);
useEffect(() => { useEffect(() => {
fetch("https://raw.githubusercontent.com/recloudstream/cs-repos/master/repos-db.json", { signal: AbortSignal.timeout(5000) }) fetch("https://raw.githubusercontent.com/recloudstream/cs-repos/master/repos-db.json")
.catch(err => { setHadError(true) }) .catch(err => { setHadError(true) })
.then(r => r.json()) .then(r => r.json())
.then(setRepos) .then(setRepos)
@ -42,9 +44,20 @@ const IndexPage = () => {
</div> </div>
</div> </div>
{(!repos && !hadError) && {(!repos && !hadError) &&
<div class="alert shadow-lg w-full mx-10 md:w-2/3 mb-5"> <div className="swap-child">
<div> <div class="alert shadow-lg w-full mx-10 md:w-2/3 mb-5">
<span>Fetching data...</span> <div>
<span>Fetching data...</span>
</div>
</div>
<div class="alert alert-error shadow-lg w-full mx-10 md:w-2/3 mb-5">
<div>
<BiErrorAlt />
<div>
<h3 class="font-bold">Failed to connect to GitHub servers.</h3>
<div class="text-xs">GitHub has been a target of <a href="https://en.wikipedia.org/wiki/Censorship_of_GitHub" className="link" target="_blank">censorship</a> in some countries. <br/> Please try changing your <a href="https://1.1.1.1/dns/" className="link" target="_blank">DNS server</a> or try using a VPN.</div>
</div>
</div>
</div> </div>
</div> </div>
} }