From e563e503c99088e9068ab1d169e2e08f3c7caa2c Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Tue, 16 Feb 2021 09:21:15 +0100
Subject: [PATCH] all questions: showing loading indicator on new db select,
 loading indicator update

---
 src/components/LoadingIndicator.js         |  8 +++---
 src/components/LoadingIndicator.module.css | 24 ++++++++++++++++++
 src/pages/allQuestions.js                  | 29 ++++++++++++++++------
 3 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 src/components/LoadingIndicator.module.css

diff --git a/src/components/LoadingIndicator.js b/src/components/LoadingIndicator.js
index 1212c1c..2ba8714 100644
--- a/src/components/LoadingIndicator.js
+++ b/src/components/LoadingIndicator.js
@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react'
 
+import styles from './LoadingIndicator.module.css'
+
 class LoadingIndicator extends PureComponent {
-  render () {
+  render() {
     return (
-      <div className='loadingindicator'>
-        Loading...
+      <div className={styles.loadContainer}>
+        <div className={styles.load} />
       </div>
     )
   }
diff --git a/src/components/LoadingIndicator.module.css b/src/components/LoadingIndicator.module.css
new file mode 100644
index 0000000..4638be8
--- /dev/null
+++ b/src/components/LoadingIndicator.module.css
@@ -0,0 +1,24 @@
+.load {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #99f;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+
+  margin: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loadContainer {
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js
index c55a98c..a4c0308 100644
--- a/src/pages/allQuestions.js
+++ b/src/pages/allQuestions.js
@@ -70,11 +70,12 @@ function fetchDbs() {
 }
 
 export default function AllQuestions({ router }) {
-  const [asd, setAsd] = useState(false)
-  const [data, setData] = useState(null)
-  const [dbs, setDbs] = useState(null)
+  const [subjectsShowing, setSubjectsShowing] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const [activeSubjName, setActiveSubjName] = useState('')
+  const [dbs, setDbs] = useState(null)
+  const [data, setData] = useState(null)
+  const [fetchingData, setFetchingData] = useState(false)
   const subjectCount = data ? data.length : 0
   const questionCount = data ? data.reduce(countReducer, 0) : 0
 
@@ -102,13 +103,17 @@ export default function AllQuestions({ router }) {
             defaultValue={-1}
             onChange={(event) => {
               const key = event.target.value
+              setData(null)
+              setFetchingData(true)
               if (key === 'all') {
                 fetchAllData(dbs).then((res) => {
                   setData(mergeData(res))
+                  setFetchingData(false)
                 })
               } else {
                 fetchData(dbs[key]).then((res) => {
                   setData(res.data)
+                  setFetchingData(false)
                 })
               }
             }}
@@ -241,19 +246,27 @@ export default function AllQuestions({ router }) {
           {data && `${questionCount} kérdés, ${subjectCount} tárgy`}
           <div className={styles.typeSelector}>
             <div
-              className={!asd ? styles.activeTypeSelector : ''}
-              onClick={() => setAsd(false)}
+              className={!subjectsShowing ? styles.activeTypeSelector : ''}
+              onClick={() => setSubjectsShowing(false)}
             >
               Kérdések
             </div>
             <div
-              className={asd ? styles.activeTypeSelector : ''}
-              onClick={() => setAsd(true)}
+              className={subjectsShowing ? styles.activeTypeSelector : ''}
+              onClick={() => setSubjectsShowing(true)}
             >
               Tárgyak
             </div>
           </div>
-          <div>{asd ? renderSubjectBrowser() : renderQuestionBrowser()}</div>
+          {fetchingData ? (
+            <LoadingIndicator />
+          ) : (
+            <div>
+              {subjectsShowing
+                ? renderSubjectBrowser()
+                : renderQuestionBrowser()}
+            </div>
+          )}
         </>
       ) : (
         <LoadingIndicator />