Merge branch 'master' into master

Author: gonenduk

docs/customization/plugin-api.md

@@ -293,7 +293,7 @@ const MyWrapSelectorsPlugin = function(system) {
 
 Wrap Components allow you to override a component registered within the system.
 
-Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`.
+Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`. If you'd prefer to provide a React component class, `(OriginalComponent, system) => ReactClass` works as well.
 
 ```javascript
 const MyWrapBuiltinComponentPlugin = function(system) {
@@ -310,9 +310,12 @@ const MyWrapBuiltinComponentPlugin = function(system) {
 }
 ```
 
+Here's another example that includes a code sample of a component that will be wrapped:
+
 ```javascript
-// Overriding a component from a plugin
+/////  Overriding a component from a plugin
 
+// Here's our normal, unmodified component.
 const MyNumberDisplayPlugin = function(system) {
   return {
     components: {
@@ -321,13 +324,15 @@ const MyNumberDisplayPlugin = function(system) {
   }
 }
 
+// Here's a component wrapper defined as a function.
 const MyWrapComponentPlugin = function(system) {
   return {
     wrapComponents: {
       NumberDisplay: (Original, system) => (props) => {
         if(props.number > 10) {
           return <div>
             <h3>Warning! Big number ahead.</h3>
+            <OriginalComponent {...props} />
           </div>
         } else {
           return <Original {...props} />
@@ -336,8 +341,30 @@ const MyWrapComponentPlugin = function(system) {
     }
   }
 }
+
+// Alternatively, here's the same component wrapper defined as a class.
+const MyWrapComponentPlugin = function(system) {
+  return {
+    wrapComponents: {
+      NumberDisplay: (Original, system) => class WrappedNumberDisplay extends React.component {
+        render() {
+          if(props.number > 10) {
+            return <div>
+              <h3>Warning! Big number ahead.</h3>
+              <OriginalComponent {...props} />
+            </div>
+          } else {
+            return <Original {...props} />
+          }
+        }
+      }
+    }
+  }
+}
 ```
 
+
+
 ##### fn
 
 The fn interface allows you to add helper functions to the system for use elsewhere.

docs/usage/installation.md

@@ -49,7 +49,7 @@ const ui = SwaggerUIBundle({
     presets: [
       SwaggerUIBundle.presets.apis,
       SwaggerUIBundle.SwaggerUIStandalonePreset
-    ]
+    ],
     layout: "StandaloneLayout"
   })
 ```
@@ -86,7 +86,7 @@ This will serve Swagger UI at `/swagger` instead of `/`.
 You can embed Swagger-UI's code directly in your HTML by using unkpg's interface:
 
 ```html
-<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js">
+<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
 <!-- `SwaggerUIBundle` is now available on the page -->
 ```
 

src/core/components/layouts/base.jsx

@@ -61,7 +61,18 @@ export default class BaseLayout extends React.Component {
     const isSpecEmpty = !specSelectors.specStr()
 
     if(isSpecEmpty) {
-      return <h4>No spec provided.</h4>
+      let loadingMessage
+      if(isLoading) {
+        loadingMessage = <div className="loading"></div>
+      } else {
+        loadingMessage = <h4>No API definition provided.</h4>
+      }
+
+      return <div className="swagger-ui">
+        <div className="loading-container">
+          {loadingMessage}
+        </div>
+      </div>
     }
 
     return (

src/standalone/layout.jsx

@@ -1,3 +1,5 @@
+
+
 import React from "react"
 import PropTypes from "prop-types"
 
@@ -32,17 +34,21 @@ export default class StandaloneLayout extends React.Component {
         { Topbar ? <Topbar /> : null }
         { loadingStatus === "loading" &&
           <div className="info">
-            <h4 className="title">Loading...</h4>
+            <div className="loading-container">
+              <div className="loading"></div>
+            </div>
           </div>
         }
         { loadingStatus === "failed" &&
           <div className="info">
-            <h4 className="title">Failed to load spec.</h4>
+            <div className="loading-container">
+              <h4 className="title">Failed to load API definition.</h4>
+            </div>
           </div>
         }
         { loadingStatus === "failedConfig" &&
           <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
-            <h4 className="title">Failed to load config.</h4>
+            <h4 className="title">Failed to load remote configuration.</h4>
           </div>
         }
         { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }

src/style/_layout.scss

@@ -653,6 +653,11 @@
 .loading-container
 {
     padding: 40px 0 60px;
+    margin-top: 1em;
+    min-height: 1px;
+    display: flex;
+    justify-content: center;
+
     .loading
     {
         position: relative;