From d7c8baadf501eda4ec075d3f211182740cbb37c3 Mon Sep 17 00:00:00 2001 From: Cloudburst <18114966+C10udburst@users.noreply.github.com> Date: Mon, 3 Oct 2022 10:18:32 +0200 Subject: [PATCH] pure css timeout --- src/pages/repos.css | 19 +++++++++++++++++++ src/pages/repos.js | 23 ++++++++++++++++++----- 2 files changed, 37 insertions(+), 5 deletions(-) create mode 100644 src/pages/repos.css diff --git a/src/pages/repos.css b/src/pages/repos.css new file mode 100644 index 0000000..9d7f160 --- /dev/null +++ b/src/pages/repos.css @@ -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; +} \ No newline at end of file diff --git a/src/pages/repos.js b/src/pages/repos.js index 5919deb..01a2b9b 100644 --- a/src/pages/repos.js +++ b/src/pages/repos.js @@ -10,12 +10,14 @@ import { BiErrorAlt } from "react-icons/bi"; import { GoVerified } from "react-icons/go"; import { IconContext } from "react-icons"; +import "./repos.css"; + const IndexPage = () => { const [repos, setRepos] = useState(null); const [hadError, setHadError] = useState(false); 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) }) .then(r => r.json()) .then(setRepos) @@ -42,11 +44,22 @@ const IndexPage = () => { {(!repos && !hadError) && -
-
- Fetching data... +
+
+
+ Fetching data... +
-
+
+
+ +
+

Failed to connect to GitHub servers.

+
GitHub has been a target of censorship in some countries.
Please try changing your DNS server or try using a VPN.
+
+
+
+
} {repos && <>