KEYCLOAK-10074: Account Console Performance

themes/src/main/resources/theme/keycloak-preview/account/index.ftl

@@ -9,6 +9,17 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
           
         <script>
+            <#if properties.developmentMode?has_content && properties.developmentMode == "true">
+            var developmentMode = true;
+            var reactRuntime = 'react.development.js';
+            var reactDOMRuntime = 'react-dom.development.js';
+            var reactRouterRuntime = 'react-router-dom.js';
+            <#else>
+            var developmentMode = false;
+            var reactRuntime = 'react.production.min.js';
+            var reactDOMRuntime = 'react-dom.production.min.js';
+            var reactRouterRuntime = 'react-router-dom.min.js';
+            </#if>
             var authUrl = '${authUrl}';
             var baseUrl = '${baseUrl}';
             var realm = '${realm.name}';
@@ -65,9 +76,6 @@
             </#list>
         </#if>
         
-   <!-- TODO: We should save these css and js into variables and then load in
-        main.ts for better performance.  These might be loaded twice.
-        -->
         <#if properties.scripts?has_content>
             <#list properties.scripts?split(' ') as script>
         <script type="text/javascript" src="${resourceUrl}/${script}"></script>
@@ -80,21 +88,19 @@
         <script>
             var keycloak = Keycloak('${authUrl}/realms/${realm.name}/account/keycloak.json');
             keycloak.init({onLoad: 'check-sso'}).success(function(authenticated) {
-                loadjs("/node_modules/react/umd/react.development.js", function() {
+                toggleReact();
-                   loadjs("/node_modules/react-dom/umd/react-dom.development.js", function() {
+                if (!keycloak.authenticated) {
-                        loadjs("/node_modules/systemjs/dist/system.src.js", function() {
+                    document.getElementById("signInButton").style.display='inline';
-                            loadjs("/systemjs.config.js", function() {
+                    document.getElementById("signInLink").style.display='inline';
-                                System.import('${resourceUrl}/Main.js').catch(function (err) {
+                } else {
-                                    console.error(err);
+                    document.getElementById("signOutButton").style.display='inline';
-                                });
+                    document.getElementById("signOutLink").style.display='inline';
-                                if (!keycloak.authenticated) {
+                }
-                                    document.getElementById("signInButton").style.display='inline';
+                    
-                                    document.getElementById("signInLink").style.display='inline';
+                loadjs("/node_modules/systemjs/dist/system.src.js", function() {
-                                } else {
+                    loadjs("/systemjs.config.js", function() {
-                                    document.getElementById("signOutButton").style.display='inline';
+                        System.import('${resourceUrl}/Main.js').catch(function (err) {
-                                    document.getElementById("signOutLink").style.display='inline';
+                            console.error(err);
-                                }
-                            });
                         });
                     });
                 });
@@ -124,7 +130,7 @@
         
 <div class="pf-c-background-image">
   <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
-    <filter id="image_overlay" width="">
+    <filter id="image_overlay">
       <feColorMatrix type="matrix" values="1 0 0 0 0
               1 0 0 0 0
               1 0 0 0 0

themes/src/main/resources/theme/keycloak-preview/account/resources/Main.tsx

@@ -23,13 +23,7 @@ import {App} from './app/App';
 
 const e = React.createElement;
 
-export interface MainProps {
+export interface MainProps {}
-}
-
-//declare function loadjs(url,loadListener?);
- 
-//loadjs('/js/MyExtension.js');
-
 export class Main extends React.Component<MainProps> {
     
     public constructor(props: MainProps) {

themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx

@@ -59,7 +59,6 @@ export class App extends React.Component<AppProps> {
 
     public constructor(props: AppProps) {
         super(props);
-        console.log('Called into App constructor');
         toggleReact();
     }
 

themes/src/main/resources/theme/keycloak-preview/account/theme.properties

@@ -1,3 +1,4 @@
 parent=base
 deprecatedMode=false
 scripts=WelcomePageScripts.js
+#developmentMode=true