Merge pull request tanem#178 from tanem/add-loading

Add loading prop

Author: Tane Morgan

README.md

@@ -28,6 +28,7 @@ render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
 - API Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/api-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/api-usage)
 - External Stylesheet: [Source](https://github.com/tanem/react-svg/tree/master/examples/external-stylesheet) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/external-stylesheet)
 - Fallbacks: [Source](https://github.com/tanem/react-svg/tree/master/examples/fallbacks) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/fallbacks)
+- Loading: [Source](https://github.com/tanem/react-svg/tree/master/examples/loading) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/loading)
 - Typescript: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript)
 - CSS-in-JS: [Source](https://github.com/tanem/react-svg/tree/master/examples/css-in-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/css-in-js)
 - UMD Build (Development): [Source](https://github.com/tanem/react-svg/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/umd-dev)
@@ -40,6 +41,7 @@ render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
 - `src` - The SVG URL.
 - `evalScripts` - _Optional_ Run any script blocks found in the SVG. One of `'always'`, `'once'`, or `'never'`. Defaults to `'never'`.
 - `fallback` - _Optional_ Fallback to use if an injection error occurs. Can be a string, class component, or function component. Defaults to `null`.
+- `loading` - _Optional_ Component to use during loading. Can be a string, class component, or function component. Defaults to `null`.
 - `onInjected` - _Optional_ Function to call after the SVG is injected. If an injection error occurs, this function receives an `Error` object as the first parameter. Otherwise, the first parameter is `null` and the second parameter is the injected SVG DOM element. Defaults to `() => {}`.
 - `renumerateIRIElements` - _Optional_ Boolean indicating if SVG IRI addressable elements should be renumerated. Defaults to `true`.
 - `svgClassName` - _Optional_ Class name to be added to the injected SVG DOM element. Defaults to `null`.
@@ -54,6 +56,7 @@ Other non-documented properties are applied to the wrapper element.
   src="svg.svg"
   evalScripts="always"
   fallback={() => <span>Error!</span>}
+  loading={() => <span>Loading</span>}
   onInjected={(error, svg) => {
     if (error) {
       console.error(error)

examples/api-usage/src/index.js

@@ -9,6 +9,7 @@ ReactDOM.render(
     // Optional props.
     evalScripts="always"
     fallback={() => <span>Error!</span>}
+    loading={() => <span>Loading</span>}
     onInjected={(error, svg) => {
       if (error) {
         console.error(error)

examples/loading/.env

@@ -0,0 +1 @@
+REACT_APP_DESCRIPTION=$npm_package_description

examples/loading/.gitignore

@@ -0,0 +1 @@
+/node_modules

examples/loading/README.md

@@ -0,0 +1,15 @@
+# ReactSVG Loading Example
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.

examples/loading/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "loading",
+  "description": "ReactSVG Loading Example",
+  "keywords": [
+    "react-svg"
+  ],
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-scripts": "2.1.1",
+    "react-spinkit": "^3.0.0",
+    "react-svg": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/loading/public/doge.png

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>%REACT_APP_DESCRIPTION%</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

examples/loading/public/index.html

@@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Spinner from 'react-spinkit'
+import ReactSVG from 'react-svg'
+
+const Loading = ({ size }) => (
+  <Spinner name="cube-grid" style={{ height: size, width: size }} />
+)
+
+ReactDOM.render(
+  <React.Fragment>
+    <ReactSVG loading={() => <Loading size={40} />} src="svg.svg" />
+    <ReactSVG
+      fallback={() => <img alt="doge" src="doge.png" />}
+      loading={() => <Loading size={60} />}
+      src="notfound.svg"
+    />
+  </React.Fragment>,
+  document.getElementById('root')
+)