Add an initial loading indicator with customization support

cloudfoundry · richard-cox · Dec 9, 2019 · Dec 4, 2019 · Dec 5, 2019 · Dec 4, 2019
commit 9bb64f18bd2151ba83ba2d8a7ac84c9da11d8894
diff --git a/build/customize-build.js b/build/customize-build.js
@@ -19,6 +19,10 @@
   const CUSTOM_METADATA = path.resolve(__dirname, '../custom-src/stratos.yaml');
   const GIT_FOLDER = path.resolve(__dirname, '../.git');
   const GIT_METADATA = path.resolve(__dirname, '../.stratos-git-metadata.json');
+  const INDEX_LOADING_HTML_CUSTOM = path.resolve(__dirname, '../custom-src/frontend/loading.html');
+  const INDEX_LOADING_HTML_DEFAULT = path.resolve(__dirname, '../src/frontend/packages/core/misc/custom/loading.html');
+  const INDEX_LOADING_CSS_CUSTOM = path.resolve(__dirname, '../custom-src/frontend/loading.css');
+  const INDEX_LOADING_CSS_DEFAULT = path.resolve(__dirname, '../src/frontend/packages/core/misc/custom/loading.css');
 
   // Apply any customizations
   // Symlink customizations of the default resources for Stratos
@@ -264,6 +268,22 @@
 
     // Date and Time that the build was made (approximately => it is when this script is run)
     replace.sync({ files: INDEX_HTML, from: '@@stratos_build_date@@', to: new Date() });
+
+    // Replace loading indicator - HTML
+    let loadingHtmlFile = INDEX_LOADING_HTML_DEFAULT;
+    if (fs.existsSync(INDEX_LOADING_HTML_CUSTOM)) {
+      loadingHtmlFile = INDEX_LOADING_HTML_CUSTOM
+    }
+    const loadingHtml = fs.readFileSync(loadingHtmlFile, 'utf8');
+    replace.sync({ files: INDEX_HTML, from: '<!-- @@LOADING_HTML@@ -->', to: loadingHtml });
+
+    // Replace loading indicator - CSS
+    let loadingCssFile = INDEX_LOADING_CSS_DEFAULT;
+    if (fs.existsSync(INDEX_LOADING_CSS_CUSTOM)) {
+      loadingCssFile = INDEX_LOADING_CSS_CUSTOM
+    }
+    const loadingCss = fs.readFileSync(loadingCssFile, 'utf8');
+    replace.sync({ files: INDEX_HTML, from: '/** @@LOADING_CSS@@ **/', to: loadingCss });
   }
 
   // We can only do this if we have a git repository checkout

diff --git a/docs/customizing.md b/docs/customizing.md
@@ -6,6 +6,7 @@ Stratos provides a mechanism for customization - the following customizations ar
 - Changing certain image assets (favorite icon, login background and logo)
 - Overriding styles
 - Adding new functionality
+- Changing the initial loading indicator
 
 ## Approach
 
@@ -103,4 +104,25 @@ We currently expose the following extension points in the Stratos UI:
 
 We use Decorators to annotate components to indicate that they are Stratos extensions.
 
-See [Extensions](extensions.md) for more detail and examples of front-end extensions.
+See [Extensions](extensions.md) for more detail and examples of front-end extensions.
+
+
+### Changing the Initial Loading Indicator
+
+On slower connections, it can take a few seconds to load the main Javascript resources for Stratos.
+
+In order to give the user some initial feedback that Stratos is loading, a loading indicator is included in the `index.html` file. This gets shown as early as possible, as soon as this main html file has loaded. Once the main code has been fetched, the view refreshes to show the application.
+
+A default loading indicator is provided that can be changed. To do so, create the following two files:
+
+- `custom-src/frontend/loading.css` - CSS styles to be included in a style block in the head of the index page
+- `custom-src/frontend/loading.html` - HTML markup to be included the the index page to render the loading indicator
+
+The files for the default indicator can be found in the `src/frontend/packages/core/misc/custom` folder.
+
+An example of a different loading indicator is included with the ACME sample in `examples/custom-src/frontend`.
+
+The customization task will insert the appropriate CSS and HTML files into the main index.html file when it runs.
+
+Take a look at the template for the `index.html` file in `src/frontend/packages/core/misc/custom/index.html`. The CSS file is inserted where the marker `/** @@LOADING_CSS@@ **/` is and the HTML file where `<!-- @@LOADING_HTML@@ -->` is.
+
diff --git a/examples/custom-src/frontend/loading.css b/examples/custom-src/frontend/loading.css
@@ -0,0 +1,35 @@
+.stratos-initial-load-spinner-container {
+  align-items: center;
+  background-color: #0D2C40;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.stratos-initial-load-spinner-logo {
+  position: absolute;
+  height: 60px;
+}
+.stratos-initial-load-spinner {
+  animation: stratos-initial-load-animate 1s infinite linear;
+  box-sizing: border-box;
+  border: 5px solid rgba(86, 107, 121,0.45);
+  border-radius: 50%;
+  border-top-color: #00B2E2;
+  display: inline-block;
+  height: 128px;
+  margin: 0 auto;
+  width: 128px;
+}
+
+@keyframes stratos-initial-load-animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
diff --git a/examples/custom-src/frontend/loading.html b/examples/custom-src/frontend/loading.html
@@ -0,0 +1,3 @@
+<div class="stratos-initial-load-spinner-container">
+  <i class="stratos-initial-load-spinner"></i>
+</div>
diff --git a/src/frontend/packages/core/misc/custom/index.html b/src/frontend/packages/core/misc/custom/index.html
@@ -40,10 +40,15 @@
     </style>
   </noscript>
 
+  <style>
+    /** @@LOADING_CSS@@ **/
+  </style>  
 </head>
 
 <body class="stratos">
-  <app-root></app-root>
+  <app-root>
+    <!-- @@LOADING_HTML@@ -->
+  </app-root>
   <noscript>
     <div class="no-javascript">
       <div class="message title">@@TITLE@@</div>

diff --git a/src/frontend/packages/core/misc/custom/loading.css b/src/frontend/packages/core/misc/custom/loading.css
@@ -0,0 +1,36 @@
+.stratos-initial-load-spinner-container {
+  align-items: center;
+  background-color: #c2cdde;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.stratos-initial-load-spinner-logo {
+  position: absolute;
+  height: 60px;
+}
+.stratos-initial-load-spinner {
+  animation: stratos-initial-load-animate 1s infinite linear;
+  background-color: #fff;
+  box-sizing: border-box;
+  border: 5px solid rgba(16, 72, 156, 0.45);
+  border-radius: 50%;
+  border-top-color: #1960ca;
+  display: inline-block;
+  height: 128px;
+  margin: 0 auto;
+  width: 128px;
+}
+
+@keyframes stratos-initial-load-animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
diff --git a/src/frontend/packages/core/misc/custom/loading.html b/src/frontend/packages/core/misc/custom/loading.html
@@ -0,0 +1,4 @@
+<div class="stratos-initial-load-spinner-container">
+  <i class="stratos-initial-load-spinner"></i>
+  <img class="stratos-initial-load-spinner-logo" src="data:image/png;base64,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" />
+</div>