Various improvement

app/modifiers/three-renderer.ts

@@ -1,6 +1,6 @@
 import Modifier, { ArgsFor } from 'ember-modifier';
 import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OrbitControls } from 'text2stl/utils/OrbitControls';
 import { tracked } from '@glimmer/tracking';
 import config from 'text2stl/config/environment';
 import { registerDestructor } from '@ember/destroyable';

app/routes/app.ts

@@ -20,7 +20,8 @@ export default class AppRoute extends Route {
 
   async model({ locale }: { locale: string }) {
     this.intl.locale = locale === 'en-us' ? locale : [locale, 'en-us'];
-    await this.fontManager.loadFontList();
+    // No await here, let's the loading happen & await for it in generator route
+    this.fontManager.loadFontList();
   }
 
   updateMeta(transition: Transition) {

app/routes/app/generator.ts

@@ -1,19 +1,24 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import type FontManagerService from 'text2stl/services/font-manager';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import config from 'text2stl/config/environment';
 
 const {
   APP: { textMakerDefault },
 } = config;
 
-export default class ApplicationRoute extends Route {
+export default class GeneratorRoute extends Route {
+  @service declare fontManager: FontManagerService;
+
   queryParams = {
     modelSettings: {
       replace: true, // No history for model changes
     },
   };
 
   async model(params: { modelSettings: string }) {
+    await this.fontManager.loadFontList();
     // Create a default settings for first rendering
     const model = new TextMakerSettings({
       ...textMakerDefault,

app/routes/app/index.ts

@@ -1,29 +1,6 @@
 import Route from '@ember/routing/route';
-import * as THREE from 'three';
-
-let loader: THREE.ObjectLoader | undefined = undefined;
-
-function loadJSONMesh(path: string): Promise<THREE.Object3D> {
-  if (!loader) {
-    loader = new THREE.ObjectLoader();
-  }
-
-  return new Promise(function (resolve, reject) {
-    loader?.load(path, resolve, () => {}, reject);
-  });
-}
 
 export default class AppIndex extends Route {
-  async model() {
-    return [
-      await loadJSONMesh('/mesh/1.json'),
-      await loadJSONMesh('/mesh/2.json'),
-      await loadJSONMesh('/mesh/3.json'),
-      await loadJSONMesh('/mesh/4.json'),
-      await loadJSONMesh('/mesh/5.json'),
-    ];
-  }
-
   afterModel() {
     document.querySelector('#app-loader')?.remove();
   }

app/services/font-manager.ts

@@ -55,7 +55,16 @@ export default class FontManagerService extends Service {
     return fetch(input, init);
   }
 
+  loadFontListPromise: undefined | Promise<void> = undefined;
   async loadFontList() {
+    if (!this.loadFontListPromise) {
+      this.loadFontListPromise = this._loadFontList();
+    }
+
+    await this.loadFontListPromise;
+  }
+
+  async _loadFontList() {
     for (const category of this.availableFontCategories) {
       const fontManager = new FontManager(googleFontApiKey, FONT_FAMILY_DEFAULT, {
         ...OPTIONS_DEFAULTS,

app/services/stl-exporter.ts

@@ -1,5 +1,5 @@
 import Service from '@ember/service';
-import { STLExporter } from 'three/examples/jsm/exporters/STLExporter';
+import { STLExporter } from 'text2stl/utils/STLExporter';
 
 import type { Mesh } from 'three';
 

app/services/text-maker.ts

@@ -1,7 +1,7 @@
 import Service from '@ember/service';
 import * as opentype from 'opentype.js';
 import * as THREE from 'three';
-import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { mergeBufferGeometries } from 'text2stl/utils/BufferGeometryUtils';
 import config from 'text2stl/config/environment';
 import { generateSupportShape } from 'text2stl/misc/support-shape-generation';
 

app/templates/app/index.hbs

@@ -21,31 +21,11 @@
           <dd>{{t "index_page.list.stl.dd"}}</dd>
         </dl>
       </div>
-      <div class="uk-card-media-bottom">
-        <div uk-slideshow="animation: fade; autoplay: true; autoplay-interval: 3000; ratio: 7:3; max-height: 250; draggable: false">
-          <ul class="uk-slideshow-items">
-            {{#each this.model as |mesh idx|}}
-              <ThreePreview @mesh={{mesh}}  as |preview|>
-                <li>
-                  <preview.renderer @parentSize={{true}} @nearCamera={{true}} />
-                  <div class="uk-position-bottom uk-position-small uk-text-center">
-                    <h4 class="uk-margin-remove uk-text-primary">
-                      {{t (concat "text_type." (plus idx))}}
-                    </h4>
-                  </div>
-                </li>
-              </ThreePreview>
-            {{/each}}
-          </ul>
-          <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
-        </div>
-      </div>
       <div class="uk-card-footer">
         <LinkTo @route="app.generator" class="uk-button uk-button-primary uk-align-center">
           {{t "index_page.button"}}
         </LinkTo>
       </div>
     </div>
   </div>
-</div> 
-
+</div>