Better boot response by splitting and embedding boot css/html into index.html

This commit is contained in:
djmaze 2020-09-05 12:22:46 +02:00
parent f2d194947d
commit 45aaa17219
12 changed files with 142 additions and 153 deletions

View file

@ -1162,7 +1162,7 @@ class Actions
/*
required by Index.html and rl.js:
NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash
NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash
*/
$aResult = array(
@ -1176,7 +1176,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack
'DevPassword' => '',
'Title' => $oConfig->Get('webmail', 'title', 'RainLoop Webmail'),
'LoadingDescription' => $oConfig->Get('webmail', 'loading_description', 'RainLoop'),
'LoadingDescriptionEsc' => 'RainLoop',
'FaviconUrl' => $oConfig->Get('webmail', 'favicon_url', ''),
'LoginDescription' => '',
'LoginLogo' => '',
@ -1218,11 +1217,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack
$aResult['AuthAccountHash'] = $sAuthAccountHash;
}
if ('' !== $aResult['LoadingDescription'] && 'RainLoop' !== $aResult['LoadingDescription'])
{
$aResult['LoadingDescriptionEsc'] = \htmlspecialchars($aResult['LoadingDescription'], ENT_QUOTES|ENT_IGNORE, 'UTF-8');
}
$oSettings = null;
if (!$bAdmin)

View file

@ -242,6 +242,8 @@ class Service
$sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png');
$sAppleTouchLink = $sFaviconUrl ? '' : $this->staticPath('apple-touch-icon.png');
$LoadingDescription = $this->oActions->Config()->Get('webmail', 'loading_description', 'RainLoop');
$aTemplateParameters = array(
'{{BaseAppHeadScriptLink}}' => '',
'{{BaseAppBodyScript}}' => '',
@ -254,7 +256,9 @@ class Service
'{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2',
'{{BaseContentSecurityPolicy}}' => '',
'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json')
'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'),
'{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot'.($bAppCssDebug ? '' : '.min').'.css'),
'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8')
);
$aTemplateParameters['{{RainloopBootData}}'] = \json_encode(array(

View file

@ -13,14 +13,36 @@
<title></title>
{{BaseAppFaviconPngLinkTag}}
{{BaseAppFaviconTouchLinkTag}}
<link type="text/css" rel="stylesheet" href="{{BaseAppMainCssLink}}" />
<link type="text/css" rel="stylesheet" href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
<style>{{BaseAppBootCss}}</style>
<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
<link rel="manifest" href="{{BaseAppManifestLink}}" />
</head>
<body class="thm-body">
<div id="rl-app" data-boot='{{RainloopBootData}}'></div>
<div id="rl-app" data-boot='{{RainloopBootData}}'>
<div id="rl-loading" class="thm-loading">
<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
<div class="e-spinner">
<div class="e-bounce bounce1"></div>
<div class="e-bounce bounce2"></div>
<div class="e-bounce bounce3"></div>
</div>
</div>
<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>
<div id="rl-content">
<div id="rl-popups"></div>
<div id="rl-center">
<div id="rl-top"></div>
<div id="rl-left"></div>
<div id="rl-right"></div>
</div>
</div>
<div id="rl-templates"></div>
<div id="rl-hidden"></div>
</div>
<div id="rl-check"></div>
<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
</body>

View file

@ -197,10 +197,6 @@
.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
}
#rl-app{
display: block;
}
// glass style
html.glass {