Ridin Spinners - Merge pull request #5 from infinitered/spinner

Ridin Spinners
infinitered · Feb 18, 2019 · a0b1f87 · a0b1f87
2 parents feec19d + 0a97cac
commit a0b1f87
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 12 deletions.
diff --git a/example/nsfw_demo/package.json b/example/nsfw_demo/package.json
@@ -9,6 +9,7 @@
     "react-dom": "^16.8.1",
     "react-dropzone": "^7.0.1",
     "react-scripts": "2.1.5",
+    "react-spinkit": "^3.0.0",
     "react-switch": "^4.1.0"
   },
   "scripts": {

diff --git a/example/nsfw_demo/public/index.html b/example/nsfw_demo/public/index.html
@@ -3,16 +3,34 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#ffc40d">
-    <meta name="theme-color" content="#ffffff">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link
+      rel="mask-icon"
+      href="%PUBLIC_URL%/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <meta name="msapplication-TileColor" content="#ffc40d" />
+    <meta name="theme-color" content="#ffffff" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1, shrink-to-fit=yes"
     />
     <meta name="theme-color" content="#000000" />
     <!--

diff --git a/example/nsfw_demo/src/App.css b/example/nsfw_demo/src/App.css
@@ -40,6 +40,16 @@ body {
   color: white;
 }
 
+#spinContainer {
+  position: absolute;
+  padding-bottom: 20px;
+}
+
+#processCube {
+  width: 200px;
+  height: 200px;
+}
+
 #results p {
   font-weight: bold;
   margin: -20px 0 15px 0;

diff --git a/example/nsfw_demo/src/App.js b/example/nsfw_demo/src/App.js
@@ -6,26 +6,29 @@ import './App.css'
 import * as nsfwjs from 'nsfwjs'
 import Dropzone from 'react-dropzone'
 import Switch from 'react-switch'
+import * as Spinner from 'react-spinkit'
 
 const blurred = { filter: 'blur(30px)', WebkitFilter: 'blur(30px)' }
 const clean = {}
+const loadingMessage = 'Loading NSFWJS Model'
 
 class App extends Component {
   state = {
     model: null,
     graphic: logo,
     titleMessage: 'Please hold, the model is loading...',
-    message: '',
+    message: loadingMessage,
     predictions: [],
-    droppedImageStyle: clean,
+    droppedImageStyle: { opacity: 0.4 },
     blurNSFW: true
   }
   componentDidMount() {
     // Load model from public
     nsfwjs.load('/model/').then(model => {
       this.setState({
         model,
-        titleMessage: 'Drag and drop an image to check'
+        titleMessage: 'Drag and drop an image to check',
+        message: 'Ready to Classify'
       })
     })
   }
@@ -121,6 +124,16 @@ class App extends Component {
     })
   }
 
+  _renderSpinner = () => {
+    if (this.state.message === loadingMessage) {
+      return (
+        <div id="spinContainer">
+          <Spinner name="cube-grid" color="#e79f23" id="processCube" />
+        </div>
+      )
+    }
+  }
+
   render() {
     return (
       <div className="App">
@@ -161,6 +174,7 @@ class App extends Component {
               />
             </div>
           </div>
+          {this._renderSpinner()}
           <div id="results">
             <p>{this.state.message}</p>
             {this._renderPredictions()}

diff --git a/example/nsfw_demo/yarn.lock b/example/nsfw_demo/yarn.lock
@@ -1994,6 +1994,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.3:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -5122,6 +5126,10 @@ loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loaders.css@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/loaders.css/-/loaders.css-0.1.2.tgz#3a9fb43726c73334a38142af9d0629019b658743"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6746,7 +6754,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.2:
+prop-types@^15.5.8, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -7028,6 +7036,15 @@ react-scripts@2.1.5:
   optionalDependencies:
     fsevents "1.2.4"
 
+react-spinkit@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-spinkit/-/react-spinkit-3.0.0.tgz#31fdaf4e18177766c57d1b1f3330290f8492a85a"
+  dependencies:
+    classnames "^2.2.3"
+    loaders.css "^0.1.2"
+    object-assign "^4.1.0"
+    prop-types "^15.5.8"
+
 react-switch@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-4.1.0.tgz#93379df044c9febe86d0b1485cb14b2a364562b6"