add message isloading

Ignaherrero · Apr 7, 2022 · 7d197ee · 7d197ee · vercel · Apr 7, 2022
1 parent 6f4a7b0
commit 7d197ee
Showing 1 changed file with 30 additions and 28 deletions.
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -125,34 +125,36 @@ export default function Home() {
           );
         })}
 
-      {/*  */}
-      <div className="flex space-x-2 justify-center">
-        <button
-          type="button"
-          data-mdb-ripple="true"
-          data-mdb-ripple-color="light"
-          className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          disabled={articles.found === "pending"}
-          onClick={() => {
-            setPage(page - 1);
-          }}
-        >
-          -
-        </button>
-        {page}
-        <button
-          type="button"
-          data-mdb-ripple="true"
-          data-mdb-ripple-color="light"
-          className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-          disabled={articles.found === "pending"}
-          onClick={() => {
-            setPage(page + 1);
-          }}
-        >
-          +
-        </button>
-      </div>
+      {articles.found === "found" ? (
+        <div className="flex space-x-2 justify-center">
+          <button
+            type="button"
+            data-mdb-ripple="true"
+            data-mdb-ripple-color="light"
+            className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+            disabled={articles.found === "pending"}
+            onClick={() => {
+              setPage(page - 1);
+            }}
+          >
+            -
+          </button>
+          {page}
+          <button
+            type="button"
+            data-mdb-ripple="true"
+            data-mdb-ripple-color="light"
+            className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
+            onClick={() => {
+              setPage(page + 1);
+            }}
+          >
+            +
+          </button>
+        </div>
+      ):(
+        <p>cargando...</p>
+      )}
     </>
   );
 }