Merge pull request #1585 from pierotofy/optim

JS bundle optimization, placeholder loading screens
OpenDroneMap · Jan 13, 2025 · 2746e9b · 2746e9b
2 parents 743f3f4 + 0ddce47
commit 2746e9b
Show file tree

Hide file tree

Showing 19 changed files with 174 additions and 102 deletions.
diff --git a/app/static/app/js/components/LayersControl.jsx b/app/static/app/js/components/LayersControl.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'ReactDOM';
 import L from 'leaflet';
 import PropTypes from 'prop-types';
 import '../css/LayersControl.scss';

diff --git a/app/static/app/js/components/MapPreview.jsx b/app/static/app/js/components/MapPreview.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'ReactDOM';
 import '../css/MapPreview.scss';
 import 'leaflet/dist/leaflet.css';
 import Leaflet from 'leaflet';

diff --git a/app/static/app/js/components/ProjectList.jsx b/app/static/app/js/components/ProjectList.jsx
@@ -113,7 +113,7 @@ class ProjectList extends Paginated {
 
     render() {
         if (this.state.loading){
-            return (<div className="project-list text-center"><i className="fa fa-sync fa-spin fa-2x fa-fw"></i></div>);
+            return (<div className="project-list text-center"><i className="fa fa-circle-notch fa-spin fa-2x fa-fw"></i></div>);
         }else{
             return (<div className="project-list">
                 <ErrorMessage bind={[this, 'error']} />

diff --git a/app/static/app/js/components/TaskList.jsx b/app/static/app/js/components/TaskList.jsx
@@ -140,7 +140,7 @@ class TaskList extends React.Component {
   render() {
     let message = "";
     if (this.state.loading){
-      message = (<span>{_("Loading...")} <i className="fa fa-sync fa-spin fa-fw"></i></span>);
+      message = (<span>{_("Loading...")} <i className="fa fa-circle-notch fa-spin fa-fw"></i></span>);
     }else if (this.state.error){
       message = (<span>{interpolate(_("Error: %(error)s"), {error: this.state.error})} <a href="javascript:void(0);" onClick={this.retry}>{_("Try again")}</a></span>);
     }else if (this.state.tasks.length === 0){

diff --git a/app/templates/app/3d_model_css.html b/app/templates/app/3d_model_css.html
@@ -0,0 +1,5 @@
+<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
+<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
+<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
+<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
+<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
diff --git a/app/templates/app/3d_model_display.html b/app/templates/app/3d_model_display.html
@@ -1,38 +1,23 @@
 {% extends "app/logged_in_base.html" %}
-{% load i18n %}
 
 {% block headers-before-bundle %}
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
-
-    <script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
-    <script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
+    {% include "3d_model_css.html" %}
 {% endblock %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'ModelView' attrs='async' %}
 
 	<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
 
 	<div data-modelview class="full-height"
 		{% for key, value in params %}
 			data-{{key}}="{{value}}"
 		{% endfor %}
-	></div>
+	>
+        {% include "3d_model_placeholder.html" %}
+    </div>
+
+    {% include "3d_model_js.html" %}
+    {% load render_bundle from webpack_loader %}
+	{% render_bundle 'ModelView' attrs='async' %}
 
 {% endblock %}
diff --git a/app/templates/app/3d_model_js.html b/app/templates/app/3d_model_js.html
@@ -0,0 +1,13 @@
+<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
+<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
+<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
+<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
+<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
+<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
+<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
+<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
+<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
+<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
+<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
+<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
+<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
diff --git a/app/templates/app/3d_model_placeholder.html b/app/templates/app/3d_model_placeholder.html
@@ -0,0 +1,3 @@
+<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">
+    <i class="fa fa-cube"></i>
+</div>
diff --git a/app/templates/app/base.html b/app/templates/app/base.html
@@ -29,6 +29,9 @@
 
     <link rel="stylesheet" type="text/css" href="{% static 'app/css/bootstrap.min.css' %}" />
 
+    <link rel="preload" href="{% static 'app/webfonts/fa-regular-400.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="{% static 'app/webfonts/fa-solid-900.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
+
     <link href="{% static 'app/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static 'app/css/metisMenu.min.css' %}" rel="stylesheet">
     <link href="{% static 'app/css/sb-admin-2.css' %}" rel="stylesheet">
@@ -116,14 +119,12 @@
     {% endautoescape %}
 {% endblock %}
 </body>
-<script src="{% static 'app/js/vendor/metisMenu.min.js' %}"></script>
+
 <script>
 {% task_options_docs_link as to_link %}
 window.__taskOptionsDocsLink = "{{ to_link|safe }}";
 
 $(function(){
-    $('#side-menu').metisMenu();
-
     $(window).bind("load resize", function() {
         {% if desktop_mode %}
         var topOffset = 0;

diff --git a/app/templates/app/dashboard.html b/app/templates/app/dashboard.html
@@ -3,9 +3,6 @@
 {% load settings %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'Dashboard' attrs='async' %}
-
 	<!--[if lte IE 8]>
 		<div class="alert alert-warning alert-dismissible">
             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>
 			{% for key, value in params %}
 				data-{{key}}="{{value}}"
 			{% endfor %}
-		></div>
-
+		>
+			<div id="dashboard-placeholder" style="height: 100%">
+				<div style="display: flex; margin-top: 4px">
+					<div style="width: 90%"></div>
+					<div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
+				</div>
+				<div style="display: flex; margin-top: 4px">
+					<div style="width: 95%"></div>
+					<div class="placeholder-item border shimmer" style="width: 5%; height: 28px; margin-right: 4px;"></div>
+				</div>
+
+				<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
+				<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
+				<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
+			</div>
+		</div>
+
 	{% endif %}
+
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'Dashboard' attrs='async' %}
 {% endblock %}
diff --git a/app/templates/app/logged_in_base.html b/app/templates/app/logged_in_base.html
@@ -51,7 +51,7 @@
 {% endblock %}
 {% block navbar-sidebar %}
     <div class="navbar-default sidebar" role="navigation">
-        <div class="sidebar-nav navbar-collapse">
+        <div class="sidebar-nav navbar-collapse collapse">
             <ul class="nav" id="side-menu">
                 <li>
                     <a href="/dashboard/"><i class="fa fa-tachometer-alt fa-fw"></i> {% trans 'Dashboard' %}</a>
@@ -139,6 +139,8 @@
                 </li>
             </ul>
         </div>
+        <script src="{% static 'app/js/vendor/metisMenu.min.js' %}"></script>
+        <script>$('#side-menu').metisMenu();</script>
         <!-- /.sidebar-collapse -->
     </div>
     <!-- /.navbar-static-side -->

diff --git a/app/templates/app/map.html b/app/templates/app/map.html
@@ -1,14 +1,14 @@
 {% extends "app/logged_in_base.html" %}
-{% load i18n %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'MapView' attrs='async' %}
-
-	<div data-mapview 
+	<div data-mapview
 		{% for key, value in params %}
 			data-{{key}}="{{value}}"
 		{% endfor %}
-	></div>
+	>
+		{% include "map_placeholder.html" %}
+	</div>
 
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'MapView' attrs='async' %}
 {% endblock %}
diff --git a/app/templates/app/map_placeholder.html b/app/templates/app/map_placeholder.html
@@ -0,0 +1,13 @@
+<div id="map-placeholder" style="height: 100%">
+    <div style="display: flex; margin-top: 4px" id="map-placeholder-header">
+        <div class="placeholder-item border" style="width: 34px; height: 34px; border-radius: 100%; margin-right: 8px;"></div>
+        <div class="placeholder-item shimmer" style="width: 33%; height: 34px;"></div>
+        <div style="width: 45%"></div>
+        <div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
+        <div class="placeholder-item border shimmer" style="width: 10%; height: 34px;"></div>
+    </div>
+
+    <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">
+        <i class="fa fa-globe"></i>
+    </div>
+</div>
diff --git a/app/templates/app/public/3d_model_display.html b/app/templates/app/public/3d_model_display.html
@@ -1,36 +1,23 @@
 {% extends "app/public/base.html" %}
 
 {% block headers-before-bundle %}
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
-
-    <script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
-    <script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
+    {% include "3d_model_css.html" %}
 {% endblock %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'ModelView' attrs='async' %}
 
     <h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
 
-	<div data-modelview class="full-height"
-		{% for key, value in params %}
+    <div data-modelview class="full-height"
+        {% for key, value in params %}
 			data-{{key}}="{{value}}"
 		{% endfor %}
-	></div>
+    >
+        {% include "3d_model_placeholder.html" %}
+    </div>
+
+    {% include "3d_model_js.html" %}
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle 'ModelView' attrs='async' %}
+
 {% endblock %}
diff --git a/app/templates/app/public/3d_model_display_iframe.html b/app/templates/app/public/3d_model_display_iframe.html
@@ -1,34 +1,27 @@
 {% extends "app/public/iframe_base.html" %}
 
 {% block headers-before-bundle %}
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
-    <link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
-
-    <script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
-    <script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
-    <script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
+    {% include "3d_model_css.html" %}
 {% endblock %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'ModelView' attrs='async' %}
+    <style type="text/css">
+    #td-model-placeholder{
+        position: absolute !important; top: 0; bottom: 0; left: 0; right: 0;
+        margin-top: 0px !important; 
+        height: 100% !important;
+    }
+    </style>
+
+    <div data-modelview class="full-height"
+        {% for key, value in params %}
+            data-{{key}}="{{value}}"
+        {% endfor %}
+    >
+        {% include "3d_model_placeholder.html" %}
+    </div>
 
-	<div data-modelview class="full-height"
-		{% for key, value in params %}
-			data-{{key}}="{{value}}"
-		{% endfor %}
-	></div>
+    {% include "3d_model_js.html" %}
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle 'ModelView' attrs='async' %}
 {% endblock %}
diff --git a/app/templates/app/public/iframe_base.html b/app/templates/app/public/iframe_base.html
@@ -2,6 +2,7 @@
 
 {% block body %}
 <div id="iframe">
+    <style type="text/css">body{height: 100%;}</style>
     {% block content %}{% endblock %}
 </div>
 {% endblock %}
diff --git a/app/templates/app/public/map.html b/app/templates/app/public/map.html
@@ -1,12 +1,16 @@
 {% extends "app/public/base.html" %}
 
 {% block content %}
-	{% load render_bundle from webpack_loader %}
-	{% render_bundle 'MapView' attrs='async' %}
+	<style type="text/css">#map-placeholder-header{margin-top: 20px !important}</style>
 
-	<div data-mapview 
+	<div data-mapview
 		{% for key, value in params %}
 			data-{{key}}="{{value}}"
 		{% endfor %}
-	></div>
+	>
+		{% include "map_placeholder.html" %}
+	</div>
+
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'MapView' attrs='async' %}
 {% endblock %}
diff --git a/app/templates/app/public/map_iframe.html b/app/templates/app/public/map_iframe.html
@@ -1,11 +1,24 @@
 {% extends "app/public/iframe_base.html" %}
 
 {% block content %}
+    <style type="text/css">
+    #map-placeholder-header{
+        display: none !important;
+    }
+    #map-placeholder-map{
+        position: absolute; top: 0; bottom: 0; left: 0; right:0;
+        margin-top: 0 !important;
+        height: 100% !important;
+    }
+    </style>
+
+    <div data-mapview
+        {% for key, value in params %}
+            data-{{key}}="{{value}}"
+        {% endfor %}
+    >
+        {% include "map_placeholder.html" %}
+    </div>
     {% load render_bundle from webpack_loader %}
     {% render_bundle 'MapView' attrs='async' %}
-    <div data-mapview
-            {% for key, value in params %}
-                data-{{key}}="{{value}}"
-            {% endfor %}
-    ></div>
 {% endblock %}