Skip to content

Commit 2746e9b

Browse files
pierotofypierotofy
authored
Merge pull request #1585 from pierotofy/optim
JS bundle optimization, placeholder loading screens
2 parents 743f3f4 + 0ddce47 commit 2746e9b

19 files changed

+174
-102
lines changed

‎app/static/app/js/components/LayersControl.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'ReactDOM';
33
import L from 'leaflet';
44
import PropTypes from 'prop-types';
55
import '../css/LayersControl.scss';

‎app/static/app/js/components/MapPreview.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import ReactDOM from 'ReactDOM';
32
import '../css/MapPreview.scss';
43
import 'leaflet/dist/leaflet.css';
54
import Leaflet from 'leaflet';

‎app/static/app/js/components/ProjectList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ class ProjectList extends Paginated {
113113

114114
render() {
115115
if (this.state.loading){
116-
return (<div className="project-list text-center"><i className="fa fa-sync fa-spin fa-2x fa-fw"></i></div>);
116+
return (<div className="project-list text-center"><i className="fa fa-circle-notch fa-spin fa-2x fa-fw"></i></div>);
117117
}else{
118118
return (<div className="project-list">
119119
<ErrorMessage bind={[this, 'error']} />

‎app/static/app/js/components/TaskList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ class TaskList extends React.Component {
140140
render() {
141141
let message = "";
142142
if (this.state.loading){
143-
message = (<span>{_("Loading...")} <i className="fa fa-sync fa-spin fa-fw"></i></span>);
143+
message = (<span>{_("Loading...")} <i className="fa fa-circle-notch fa-spin fa-fw"></i></span>);
144144
}else if (this.state.error){
145145
message = (<span>{interpolate(_("Error: %(error)s"), {error: this.state.error})} <a href="javascript:void(0);" onClick={this.retry}>{_("Try again")}</a></span>);
146146
}else if (this.state.tasks.length === 0){

‎app/templates/app/3d_model_css.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
2+
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
3+
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
4+
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
5+
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">

‎app/templates/app/3d_model_display.html

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,23 @@
11
{% extends "app/logged_in_base.html" %}
2-
{% load i18n %}
32

43
{% block headers-before-bundle %}
5-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
6-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
7-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
8-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
9-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
10-
11-
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
12-
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
13-
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
14-
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
15-
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
16-
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
17-
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
18-
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
19-
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
20-
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
21-
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
22-
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
23-
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
4+
{% include "3d_model_css.html" %}
245
{% endblock %}
256

267
{% block content %}
27-
{% load render_bundle from webpack_loader %}
28-
{% render_bundle 'ModelView' attrs='async' %}
298

309
<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
3110

3211
<div data-modelview class="full-height"
3312
{% for key, value in params %}
3413
data-{{key}}="{{value}}"
3514
{% endfor %}
36-
></div>
15+
>
16+
{% include "3d_model_placeholder.html" %}
17+
</div>
18+
19+
{% include "3d_model_js.html" %}
20+
{% load render_bundle from webpack_loader %}
21+
{% render_bundle 'ModelView' attrs='async' %}
3722

3823
{% endblock %}

‎app/templates/app/3d_model_js.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
2+
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
3+
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
4+
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
5+
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
6+
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
7+
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
8+
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
9+
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
10+
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
11+
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
12+
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
13+
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>

‎app/templates/app/3d_model_placeholder.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="placeholder-item pulse" id="td-model-placeholder" style="margin-top: 16px; display: flex; height: calc(100% - 32px); width: 100%; justify-content: center; align-items: center">
2+
<i class="fa fa-cube"></i>
3+
</div>

‎app/templates/app/base.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929

3030
<link rel="stylesheet" type="text/css" href="{% static 'app/css/bootstrap.min.css' %}" />
3131

32+
<link rel="preload" href="{% static 'app/webfonts/fa-regular-400.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
33+
<link rel="preload" href="{% static 'app/webfonts/fa-solid-900.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
34+
3235
<link href="{% static 'app/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
3336
<link href="{% static 'app/css/metisMenu.min.css' %}" rel="stylesheet">
3437
<link href="{% static 'app/css/sb-admin-2.css' %}" rel="stylesheet">
@@ -116,14 +119,12 @@
116119
{% endautoescape %}
117120
{% endblock %}
118121
</body>
119-
<script src="{% static 'app/js/vendor/metisMenu.min.js' %}"></script>
122+
120123
<script>
121124
{% task_options_docs_link as to_link %}
122125
window.__taskOptionsDocsLink = "{{ to_link|safe }}";
123126

124127
$(function(){
125-
$('#side-menu').metisMenu();
126-
127128
$(window).bind("load resize", function() {
128129
{% if desktop_mode %}
129130
var topOffset = 0;

‎app/templates/app/dashboard.html

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33
{% load settings %}
44

55
{% block content %}
6-
{% load render_bundle from webpack_loader %}
7-
{% render_bundle 'Dashboard' attrs='async' %}
8-
96
<!--[if lte IE 8]>
107
<div class="alert alert-warning alert-dismissible">
118
WebODM cannot be used with this version of Internet Explorer. Could you please upgrade <a href="https://www.microsoft.com/en-us/download/internet-explorer.aspx">Internet Explorer</a> to the latest version or use <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>?
@@ -47,7 +44,25 @@ <h3>{% trans 'Welcome!' %} ☺</h3>
4744
{% for key, value in params %}
4845
data-{{key}}="{{value}}"
4946
{% endfor %}
50-
></div>
51-
47+
>
48+
<div id="dashboard-placeholder" style="height: 100%">
49+
<div style="display: flex; margin-top: 4px">
50+
<div style="width: 90%"></div>
51+
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
52+
</div>
53+
<div style="display: flex; margin-top: 4px">
54+
<div style="width: 95%"></div>
55+
<div class="placeholder-item border shimmer" style="width: 5%; height: 28px; margin-right: 4px;"></div>
56+
</div>
57+
58+
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
59+
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
60+
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
61+
</div>
62+
</div>
63+
5264
{% endif %}
65+
66+
{% load render_bundle from webpack_loader %}
67+
{% render_bundle 'Dashboard' attrs='async' %}
5368
{% endblock %}

‎app/templates/app/logged_in_base.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
{% endblock %}
5252
{% block navbar-sidebar %}
5353
<div class="navbar-default sidebar" role="navigation">
54-
<div class="sidebar-nav navbar-collapse">
54+
<div class="sidebar-nav navbar-collapse collapse">
5555
<ul class="nav" id="side-menu">
5656
<li>
5757
<a href="/dashboard/"><i class="fa fa-tachometer-alt fa-fw"></i> {% trans 'Dashboard' %}</a>
@@ -139,6 +139,8 @@
139139
</li>
140140
</ul>
141141
</div>
142+
<script src="{% static 'app/js/vendor/metisMenu.min.js' %}"></script>
143+
<script>$('#side-menu').metisMenu();</script>
142144
<!-- /.sidebar-collapse -->
143145
</div>
144146
<!-- /.navbar-static-side -->

‎app/templates/app/map.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{% extends "app/logged_in_base.html" %}
2-
{% load i18n %}
32

43
{% block content %}
5-
{% load render_bundle from webpack_loader %}
6-
{% render_bundle 'MapView' attrs='async' %}
7-
8-
<div data-mapview
4+
<div data-mapview
95
{% for key, value in params %}
106
data-{{key}}="{{value}}"
117
{% endfor %}
12-
></div>
8+
>
9+
{% include "map_placeholder.html" %}
10+
</div>
1311

12+
{% load render_bundle from webpack_loader %}
13+
{% render_bundle 'MapView' attrs='async' %}
1414
{% endblock %}

‎app/templates/app/map_placeholder.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div id="map-placeholder" style="height: 100%">
2+
<div style="display: flex; margin-top: 4px" id="map-placeholder-header">
3+
<div class="placeholder-item border" style="width: 34px; height: 34px; border-radius: 100%; margin-right: 8px;"></div>
4+
<div class="placeholder-item shimmer" style="width: 33%; height: 34px;"></div>
5+
<div style="width: 45%"></div>
6+
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
7+
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px;"></div>
8+
</div>
9+
10+
<div class="placeholder-item pulse" id="map-placeholder-map" style="margin-top: 16px; display: flex; height: calc(100% - 32px); width: 100%; justify-content: center; align-items: center">
11+
<i class="fa fa-globe"></i>
12+
</div>
13+
</div>

‎app/templates/app/public/3d_model_display.html

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,23 @@
11
{% extends "app/public/base.html" %}
22

33
{% block headers-before-bundle %}
4-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
5-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
6-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
7-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
8-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
9-
10-
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
11-
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
12-
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
13-
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
14-
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
15-
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
16-
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
17-
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
18-
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
19-
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
20-
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
21-
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
22-
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
4+
{% include "3d_model_css.html" %}
235
{% endblock %}
246

257
{% block content %}
26-
{% load render_bundle from webpack_loader %}
27-
{% render_bundle 'ModelView' attrs='async' %}
288

299
<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
3010

31-
<div data-modelview class="full-height"
32-
{% for key, value in params %}
11+
<div data-modelview class="full-height"
12+
{% for key, value in params %}
3313
data-{{key}}="{{value}}"
3414
{% endfor %}
35-
></div>
15+
>
16+
{% include "3d_model_placeholder.html" %}
17+
</div>
18+
19+
{% include "3d_model_js.html" %}
20+
{% load render_bundle from webpack_loader %}
21+
{% render_bundle 'ModelView' attrs='async' %}
22+
3623
{% endblock %}

‎app/templates/app/public/3d_model_display_iframe.html

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
{% extends "app/public/iframe_base.html" %}
22

33
{% block headers-before-bundle %}
4-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
5-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
6-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
7-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
8-
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
9-
10-
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
11-
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
12-
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
13-
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
14-
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
15-
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
16-
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
17-
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
18-
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
19-
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
20-
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
21-
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
22-
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
4+
{% include "3d_model_css.html" %}
235
{% endblock %}
246

257
{% block content %}
26-
{% load render_bundle from webpack_loader %}
27-
{% render_bundle 'ModelView' attrs='async' %}
8+
<style type="text/css">
9+
#td-model-placeholder{
10+
position: absolute !important; top: 0; bottom: 0; left: 0; right: 0;
11+
margin-top: 0px !important;
12+
height: 100% !important;
13+
}
14+
</style>
15+
16+
<div data-modelview class="full-height"
17+
{% for key, value in params %}
18+
data-{{key}}="{{value}}"
19+
{% endfor %}
20+
>
21+
{% include "3d_model_placeholder.html" %}
22+
</div>
2823

29-
<div data-modelview class="full-height"
30-
{% for key, value in params %}
31-
data-{{key}}="{{value}}"
32-
{% endfor %}
33-
></div>
24+
{% include "3d_model_js.html" %}
25+
{% load render_bundle from webpack_loader %}
26+
{% render_bundle 'ModelView' attrs='async' %}
3427
{% endblock %}

‎app/templates/app/public/iframe_base.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
{% block body %}
44
<div id="iframe">
5+
<style type="text/css">body{height: 100%;}</style>
56
{% block content %}{% endblock %}
67
</div>
78
{% endblock %}

‎app/templates/app/public/map.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
{% extends "app/public/base.html" %}
22

33
{% block content %}
4-
{% load render_bundle from webpack_loader %}
5-
{% render_bundle 'MapView' attrs='async' %}
4+
<style type="text/css">#map-placeholder-header{margin-top: 20px !important}</style>
65

7-
<div data-mapview
6+
<div data-mapview
87
{% for key, value in params %}
98
data-{{key}}="{{value}}"
109
{% endfor %}
11-
></div>
10+
>
11+
{% include "map_placeholder.html" %}
12+
</div>
13+
14+
{% load render_bundle from webpack_loader %}
15+
{% render_bundle 'MapView' attrs='async' %}
1216
{% endblock %}

‎app/templates/app/public/map_iframe.html

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
11
{% extends "app/public/iframe_base.html" %}
22

33
{% block content %}
4+
<style type="text/css">
5+
#map-placeholder-header{
6+
display: none !important;
7+
}
8+
#map-placeholder-map{
9+
position: absolute; top: 0; bottom: 0; left: 0; right:0;
10+
margin-top: 0 !important;
11+
height: 100% !important;
12+
}
13+
</style>
14+
15+
<div data-mapview
16+
{% for key, value in params %}
17+
data-{{key}}="{{value}}"
18+
{% endfor %}
19+
>
20+
{% include "map_placeholder.html" %}
21+
</div>
422
{% load render_bundle from webpack_loader %}
523
{% render_bundle 'MapView' attrs='async' %}
6-
<div data-mapview
7-
{% for key, value in params %}
8-
data-{{key}}="{{value}}"
9-
{% endfor %}
10-
></div>
1124
{% endblock %}

0 commit comments

Comments
 (0)