Fix blinking fonts again

Fix manifest for PWA

src/components/languageChangeButton.ts

@@ -6,6 +6,7 @@
 
 import { cancelEvent } from "../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../helpers/dom/clickEvent";
+import loadFonts from "../helpers/dom/loadFonts";
 import { Config, LangPackDifference, LangPackString } from "../layer";
 import I18n, { LangPackKey } from "../lib/langPack";
 import apiManager from "../lib/mtproto/mtprotoworker";
@@ -61,7 +62,11 @@ export default function getLanguageChangeButton(appendTo: HTMLElement) {
     });
 
     const btnChangeLanguage = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.ContinueOnLanguage'});
-    appendTo.append(btnChangeLanguage);
+    loadFonts().then(() => {
+      window.requestAnimationFrame(() => {
+        appendTo.append(btnChangeLanguage);
+      });
+    });
 
     rootScope.addEventListener('language_change', () => {
       btnChangeLanguage.remove();

src/helpers/dom/loadFonts.ts

@@ -0,0 +1,12 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+let promise: Promise<any>;
+export default function loadFonts(): Promise<void> {
+  if(promise) return promise;
+  // @ts-ignore
+  return promise = 'fonts' in document ? Promise.all(['400 1rem Roboto', '500 1rem Roboto', '500 1rem tgico'].map(font => document.fonts.load(font))) : Promise.resolve();
+}

src/index.ts

@@ -8,6 +8,7 @@ import App from './config/app';
 import blurActiveElement from './helpers/dom/blurActiveElement';
 import findUpClassName from './helpers/dom/findUpClassName';
 import fixSafariStickyInput from './helpers/dom/fixSafariStickyInput';
+import loadFonts from './helpers/dom/loadFonts';
 import { isMobileSafari } from './helpers/userAgent';
 import './materialize.scss';
 import './scss/style.scss';
@@ -261,11 +262,6 @@ console.timeEnd('get storage1'); */
 
     const langPromise = I18n.default.getCacheLangPack();
 
-    function loadFonts(): Promise<void> {
-      // @ts-ignore
-      return 'fonts' in document ? Promise.all(['400 1rem Roboto', '500 1rem Roboto'].map(font => document.fonts.load(font))) : Promise.resolve();
-    }
-  
     const [state, langPack] = await Promise.all([
       appStateManager.default.getState(), 
       langPromise

src/lib/appManagers/appDialogsManager.ts

@@ -395,7 +395,9 @@ export class AppDialogsManager {
     new ConnectionStatusComponent(this.chatsContainer);
     this.chatsContainer.append(bottomPart);
 
-    lottieLoader.loadLottieWorkers();
+    setTimeout(() => {
+      lottieLoader.loadLottieWorkers();
+    }, 200);
   }
 
   private getOffset(side: 'top' | 'bottom'): {index: number, pos: number} {

src/pages/pageIm.ts

@@ -1,5 +1,3 @@
-//import {stackBlurImage} from '../lib/StackBlur';
-//import appStateManager from "../lib/appManagers/appStateManager";
 /*
  * https://github.com/morethanwords/tweb
  * Copyright (C) 2019-2021 Eduard Kuzmenko
@@ -7,6 +5,7 @@
  */
 
 import blurActiveElement from "../helpers/dom/blurActiveElement";
+import loadFonts from "../helpers/dom/loadFonts";
 import appStateManager from "../lib/appManagers/appStateManager";
 import I18n from "../lib/langPack";
 import Page from "./page";
@@ -30,25 +29,27 @@ let onFirstMount = () => {
   }
 
   blurActiveElement();
-  return new Promise<void>((resolve) => {
+  return loadFonts().then(() => {
-    window.requestAnimationFrame(() => {
+    return new Promise<void>((resolve) => {
-      const promise = import('../lib/appManagers/appDialogsManager');
+      window.requestAnimationFrame(() => {
-      promise.finally(async() => {
+        const promise = import('../lib/appManagers/appDialogsManager');
-        //alert('pageIm!');
+        promise.finally(async() => {
-        resolve();
+          //alert('pageIm!');
-    
+          resolve();
-        //AudioContext && global.navigator && global.navigator.mediaDevices && global.navigator.mediaDevices.getUserMedia && global.WebAssembly;
+      
-    
+          //AudioContext && global.navigator && global.navigator.mediaDevices && global.navigator.mediaDevices.getUserMedia && global.WebAssembly;
-        /* // @ts-ignore
+      
-        var AudioContext = globalThis.AudioContext || globalThis.webkitAudioContext;
+          /* // @ts-ignore
-        alert('AudioContext:' + typeof(AudioContext));
+          var AudioContext = globalThis.AudioContext || globalThis.webkitAudioContext;
-        // @ts-ignore
+          alert('AudioContext:' + typeof(AudioContext));
-        alert('global.navigator:' + typeof(navigator));
+          // @ts-ignore
-        alert('navigator.mediaDevices:' + typeof(navigator.mediaDevices));
+          alert('global.navigator:' + typeof(navigator));
-        alert('navigator.mediaDevices.getUserMedia:' + typeof(navigator.mediaDevices?.getUserMedia));
+          alert('navigator.mediaDevices:' + typeof(navigator.mediaDevices));
-        alert('global.WebAssembly:' + typeof(WebAssembly)); */
+          alert('navigator.mediaDevices.getUserMedia:' + typeof(navigator.mediaDevices?.getUserMedia));
-    
+          alert('global.WebAssembly:' + typeof(WebAssembly)); */
-        //(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el));
+      
+          //(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el));
+        });
       });
     });
   });