feat: ✨ Added spinner to cell loading package and response message to cell

AceTheCreator · AceTheCreator · commit cd33efea95f6 · 2021-03-15T03:29:55.000+01:00
diff --git a/src/Cell.js b/src/Cell.js
@@ -12,7 +12,6 @@ import CodeMirror from "react-codemirror";
 import { Remarkable } from "remarkable";
 import { CgMathPlus, CgArrowUp, CgArrowDown, CgTrash } from "react-icons/cg";
 import { BsFillCaretRightFill } from "react-icons/bs";
-// eslint-disable-next-line no-unused-vars
 import {
   AddCellButton,
   CellButton,
@@ -23,6 +22,7 @@ import {
   RunContainer,
   CellBodyContainer,
 } from "./Cell.style";
+import roll from "./static/rolling.svg";
 
 require("codemirror/lib/codemirror.css");
 require("codemirror/mode/javascript/javascript");
@@ -45,7 +45,7 @@ export default function Cell({
       setShowMoreCellButton("none");
     }
   }, [cellId, currentCell]);
-  const getCode = () => {
+  const getCode = async () => {
     if (cell.type === "code") {
       const input = refCode.current.getCodeMirror().getValue();
       try {
@@ -164,6 +164,7 @@ export default function Cell({
         <RunContainer>
           {currentCell === cellId ? (
             <div
+              id="play"
               onClick={() => {
                 getCode();
               }}
@@ -173,6 +174,13 @@ export default function Cell({
           ) : (
             <div>[{cellId}]:</div>
           )}
+          <img
+            id="activity-loader"
+            style={{ display: "none" }}
+            width="30px"
+            src={roll}
+            alt="running-cell"
+          />
         </RunContainer>
         <CellBodyContainer>
           <CellHead>
@@ -284,6 +292,7 @@ export default function Cell({
           onClick={() => {
             disableOutput();
           }}
+          id="cell-output"
         ></Output>
       </div>
     </>
diff --git a/src/static/rolling.svg b/src/static/rolling.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="204px" height="204px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="black" stroke-width="3" r="31" stroke-dasharray="146.08405839192537 50.69468613064179">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.8695652173913042s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
diff --git a/src/utils.js b/src/utils.js
@@ -137,20 +137,32 @@ export const downLoad_notebook = (state) => {
  * @param {Array} array of package CDNs to load
  * @param {*} callback
  */
-export const load_package = (array, callback) => {
+// eslint-disable-next-line consistent-return
+const load_package = async (array, callback) => {
   try {
-    // document.getElementById("cell-running").style.display = "block";
+    document.getElementById("play").style.display = "none";
+    document.getElementById("activity-loader").style.display = "block";
     const loader = function (src, handler) {
       const script = document.createElement("script");
-      console.log(src);
       script.type = "text/javascript";
       script.src = src;
-      const a = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest";
-      console.log(a);
       script.onload = script.onreadystatechange = function () {
         script.onreadystatechange = script.onload = null;
+        document.getElementById("play").style.display = "block";
+        document.getElementById("activity-loader").style.display = "none";
+        document.getElementById("cell-output").innerHTML =
+          "Package sucessfully loaded";
+        document.getElementById("cell-output").style.color = "white";
         handler();
       };
+      script.onerror = function (error) {
+        document.getElementById("play").style.display = "block";
+        document.getElementById("activity-loader").style.display = "none";
+        document.getElementById(
+          "cell-output"
+        ).innerHTML = `Failed to load package ${error.path[0].src}. Check internet connection or package url`;
+        document.getElementById("cell-output").style.color = "red";
+      };
       script.async = true;
       document.body.appendChild(script);
       eval(script);
@@ -162,8 +174,8 @@ export const load_package = (array, callback) => {
         // eslint-disable-next-line no-unused-expressions
         callback && callback();
       }
-      // document.getElementById("cell-running").style.display = "none";
     })();
+    return "done";
   } catch (error) {
     console.log(error);
   }
