Skip to content

Commit 54996c9

Browse files
janryWangjanryWang
committed
feat:add loading spinner
1 parent ad6f17b commit 54996c9

File tree

7 files changed

+84
-9
lines changed

7 files changed

+84
-9
lines changed

‎lib/assets/template.ejs‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,44 @@
1414
<script src="http://localhost:<%= htmlWebpackPlugin.options.port %>/webpack-dev-server.js"></script>
1515
<% } %>
1616
<%= htmlWebpackPlugin.options.header %>
17+
<style>
18+
.loading-svg {
19+
position: absolute;
20+
left: 0; right: 0; top: 0; bottom: 0;
21+
margin: auto;
22+
display: none;
23+
}
24+
25+
.loading-rect {
26+
fill: none;
27+
stroke-width: 8px;
28+
stroke: black;
29+
stroke-dasharray: 40;
30+
stroke-dashoffset: 50%;
31+
32+
animation: movedash 1.5s forwards 0s infinite;
33+
}
34+
35+
@keyframes movedash {
36+
to {
37+
stroke-dashoffset: 250%;
38+
}
39+
}
40+
</style>
1741
</head>
1842

1943
<body>
20-
<div id="root"></div>
44+
<div id="root">
45+
<svg width="40" height="40" viewbox="0 0 40 40" class="loading-svg">
46+
<polygon points="0 0 0 40 40 40 40 0" class="loading-rect" />
47+
</svg>
48+
</div>
2149
<script>
2250
var mountNode = document.getElementById('root')
51+
setTimeout(()=>{
52+
var svg = document.querySelector('.loading-svg')
53+
if(svg) svg.style.display = 'block'
54+
},1000)
2355
</script>
2456
<script
2557
src="https://unpkg.com/react@16/umd/react.<%= htmlWebpackPlugin.options.development ? "development" : "production.min" %>.js"

‎lib/webpack/doc-scripts-iframe.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ module.exports = _async(function (options) {
314314
}, function () {
315315
var code = "\n import React from 'react'\n import ReactDOM from 'react-dom'\n import ReactDocRenderer from 'react-doc-renderer'\n import createDocs from '" + path.resolve(__dirname, './docs') + "'\n import '" + path.resolve(__dirname, './markdown.css') + "'\n " + toArr(options.requires).map(function (path) {
316316
return "import '" + path + "'";
317-
}).join('\n') + "\n const dependencies = {" + createDeps(docs) + "}\n window.__dirname = '" + (hasSummary ? path.dirname(summaryPath) : '') + "/';\n ReactDOM.render(\n React.createElement(React.Suspense,{\n fallback:React.createElement('div')\n },\n React.createElement(\n ReactDocRenderer,\n {\n logo:React.createElement('span',{},'" + (pkg.name || 'This is Logo') + "'),\n docs:createDocs(" + JSON.stringify(docs) + ",true,dependencies)\n })),\n document.getElementById('root')\n );\n ";
317+
}).join('\n') + "\n const dependencies = {" + createDeps(docs) + "}\n window.__dirname = '" + (hasSummary ? path.dirname(summaryPath) : '') + "/';\n ReactDOM.render(\n React.createElement(React.Suspense,{\n fallback:React.createElement(\"svg\", {\n width: \"40\",\n height: \"40\",\n viewBox: \"0 0 40 40\",\n className: \"loading-svg\"\n }, React.createElement(\"polygon\", {\n points: \"0 0 0 40 40 40 40 0\",\n className: \"loading-rect\"\n }))\n },\n React.createElement(\n ReactDocRenderer,\n {\n logo:React.createElement('span',{},'" + (pkg.name || 'This is Logo') + "'),\n docs:createDocs(" + JSON.stringify(docs) + ",true,dependencies)\n })),\n document.getElementById('root')\n );\n ";
318318
return {
319319
code: code
320320
};

‎lib/webpack/docs.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
55
exports.__esModule = true;
66
exports["default"] = void 0;
77

8+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9+
810
var _react = _interopRequireDefault(require("react"));
911

1012
var _resolvePathname = _interopRequireDefault(require("resolve-pathname"));
@@ -76,11 +78,11 @@ var _default = function _default(docs, isSummary, deps) {
7678
} else if (node.type === 'html' || node.depth > 1 || node.depth <= 1 && node.children && node.children.length > 0) {
7779
var remoteUrl = node.link;
7880

79-
node.component = function () {
80-
return _react["default"].createElement('iframe', {
81+
node.component = function (props) {
82+
return _react["default"].createElement('iframe', (0, _extends2["default"])({}, props, {
8183
className: 'doc-scripts-iframe',
8284
src: !node.isRemoteUrl ? "./iframe.html?path=" + node.path : remoteUrl
83-
});
85+
}));
8486
};
8587

8688
delete node.link;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "doc-scripts",
3-
"version": "1.7.19",
3+
"version": "1.7.20",
44
"description": "react demo server",
55
"main": "lib",
66
"scripts": {

‎src/assets/template.ejs‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,44 @@
1414
<script src="http://localhost:<%= htmlWebpackPlugin.options.port %>/webpack-dev-server.js"></script>
1515
<% } %>
1616
<%= htmlWebpackPlugin.options.header %>
17+
<style>
18+
.loading-svg {
19+
position: absolute;
20+
left: 0; right: 0; top: 0; bottom: 0;
21+
margin: auto;
22+
display: none;
23+
}
24+
25+
.loading-rect {
26+
fill: none;
27+
stroke-width: 8px;
28+
stroke: black;
29+
stroke-dasharray: 40;
30+
stroke-dashoffset: 50%;
31+
32+
animation: movedash 1.5s forwards 0s infinite;
33+
}
34+
35+
@keyframes movedash {
36+
to {
37+
stroke-dashoffset: 250%;
38+
}
39+
}
40+
</style>
1741
</head>
1842

1943
<body>
20-
<div id="root"></div>
44+
<div id="root">
45+
<svg width="40" height="40" viewbox="0 0 40 40" class="loading-svg">
46+
<polygon points="0 0 0 40 40 40 40 0" class="loading-rect" />
47+
</svg>
48+
</div>
2149
<script>
2250
var mountNode = document.getElementById('root')
51+
setTimeout(()=>{
52+
var svg = document.querySelector('.loading-svg')
53+
if(svg) svg.style.display = 'block'
54+
},1000)
2355
</script>
2456
<script
2557
src="https://unpkg.com/react@16/umd/react.<%= htmlWebpackPlugin.options.development ? "development" : "production.min" %>.js"

‎src/webpack/doc-scripts-iframe.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,15 @@ module.exports = async function(options) {
122122
window.__dirname = '${hasSummary ? path.dirname(summaryPath) : ''}/';
123123
ReactDOM.render(
124124
React.createElement(React.Suspense,{
125-
fallback:React.createElement('div')
125+
fallback:React.createElement("svg", {
126+
width: "40",
127+
height: "40",
128+
viewBox: "0 0 40 40",
129+
className: "loading-svg"
130+
}, React.createElement("polygon", {
131+
points: "0 0 0 40 40 40 40 0",
132+
className: "loading-rect"
133+
}))
126134
},
127135
React.createElement(
128136
ReactDocRenderer,

‎src/webpack/docs.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,9 @@ export default (docs, isSummary, deps = {}) => {
6262
(node.depth <= 1 && node.children && node.children.length > 0)
6363
) {
6464
const remoteUrl = node.link
65-
node.component = () => {
65+
node.component = (props) => {
6666
return React.createElement('iframe', {
67+
...props,
6768
className: 'doc-scripts-iframe',
6869
src: !node.isRemoteUrl
6970
? `./iframe.html?path=${node.path}`

0 commit comments

Comments
 (0)