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 %}

0 commit comments

Comments
 (0)