feat: Added a loading spinner

Author: atapas

components/core/App.js

@@ -1,14 +1,24 @@
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
+
+// harperDb fetch call
 import { harperFetch } from "../../utils/HarperFetch";
 
-import { shapes } from "../../data/shapes";
+// Dummy Shape Data
+// import { shapes } from "../../data/shapes";
 
+// Toast
 import toast from "react-hot-toast";
 
+// Clip-Path
 const Shape = dynamic(import("react-clip-path"), { ssr: false });
+
+// Switch
 import Switch from "react-switch";
 
+// loader
+import Loader from "react-loader-spinner";
+
 import {
   ShapeCards,
   ShapeCard,
@@ -32,10 +42,10 @@ const App = (props) => {
     setLoading(true);
 
     // fetching the shape data
-    /*const shapes = await harperFetch({
+    const shapes = await harperFetch({
       operation: "sql",
       sql: "SELECT * FROM tryshape.shapes",
-    });*/
+    });
 
     console.log(shapes);
     let modifiedShapes = shapes.map((shape, index) => {
@@ -82,7 +92,13 @@ const App = (props) => {
   return (
     <>
       {loading ? (
-        <h1>Loading...</h1>
+        <Loader
+          style={{margin: '20% auto auto 42%'}}
+          type="Circles"
+          color="#eb3d86"
+          height={300}
+          width={300}
+        />
       ) : (
         <ShapePallete>
           <ShapeCards>

package.json

@@ -14,6 +14,7 @@
     "react-dom": "17.0.1",
     "react-hot-toast": "^2.0.0",
     "react-icons": "^4.2.0",
+    "react-loader-spinner": "^4.0.0",
     "react-switch": "^6.0.0",
     "styled-components": "^5.3.0"
   },

yarn.lock

@@ -1614,6 +1614,13 @@ react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-loader-spinner@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#43d9e71b0574219f64216933c28ef5faa12262f6"
+  integrity sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"