all questions: showing loading indicator on new db select, loading indicator update

src/components/LoadingIndicator.js

@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react'
 
+import styles from './LoadingIndicator.module.css'
+
 class LoadingIndicator extends PureComponent {
   render() {
     return (
-      <div className='loadingindicator'>
+      <div className={styles.loadContainer}>
-        Loading...
+        <div className={styles.load} />
       </div>
     )
   }

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;
+}

src/pages/allQuestions.js

@@ -70,11 +70,12 @@ function fetchDbs() {
 }
 
 export default function AllQuestions({ router }) {
-  const [asd, setAsd] = useState(false)
+  const [subjectsShowing, setSubjectsShowing] = useState(false)
-  const [data, setData] = useState(null)
-  const [dbs, setDbs] = useState(null)
   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 : ''}
+              className={!subjectsShowing ? styles.activeTypeSelector : ''}
-              onClick={() => setAsd(false)}
+              onClick={() => setSubjectsShowing(false)}
             >
               Kérdések
             </div>
             <div
-              className={asd ? styles.activeTypeSelector : ''}
+              className={subjectsShowing ? styles.activeTypeSelector : ''}
-              onClick={() => setAsd(true)}
+              onClick={() => setSubjectsShowing(true)}
             >
               Tárgyak
             </div>
           </div>
-          <div>{asd ? renderSubjectBrowser() : renderQuestionBrowser()}</div>
+          {fetchingData ? (
+            <LoadingIndicator />
+          ) : (
+            <div>
+              {subjectsShowing
+                ? renderSubjectBrowser()
+                : renderQuestionBrowser()}
+            </div>
+          )}
         </>
       ) : (
         <LoadingIndicator />