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 = () => {
                 </div>
             </div>
             {(!repos && !hadError) &&
-                <div class="alert shadow-lg w-full mx-10 md:w-2/3 mb-5">
-                    <div>
-                        <span>Fetching data...</span>
+                <div className="swap-child">
+                    <div class="alert shadow-lg w-full mx-10 md:w-2/3 mb-5">
+                        <div>
+                            <span>Fetching data...</span>
+                        </div>
                     </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>
             }
             {repos &&
                 <>