Prerendering

Make your app appear to load faster by generating a static view at build time

When your app is shown together with many other apps it can take a second or two until your code is run and the app is rendered. This gives an undesired appearance of "slow-loading".

To counter this you can use the prerender feature of the build process. This allows you to generate a simpler, static component complete with the normal application toolbar and menus inside the built html files instead of the normal, empty <div id="root"/> tag where the application is rendered into at run time. This static component will be visible until your application code is run and will then replaced by the actual application's generated html. First, you must tweak your index.js entrypoint. This is how it could look:

import { AppFrame, AppPlaceholder } from '@deskpro/apps-components';
import { createApp } from '@deskpro/apps-sdk';
import ReactDOM from 'react-dom';
import React from 'react';

createApp(dpapp => props => {
  ReactDOM.render(
    <AppFrame {...props}>
      {dpapp.getProperty('isPreRender') ? <AppPlaceholder /> : <App dpapp={dpapp}/>}
    </AppFrame>,
    document.getElementById('root')
  );
});

Of course you can replace the default AppPlaceholder component with any other component you see fit. The property 'isPreRender' is only available at build time so it won't affect your code when the app is running in the browser

During the build process the 'targets' entry from 'deskpro' key inside package.json is scanned for html files, ignoring the installer. The static placeholder is then inserted in the built html and the files are written back to their normal location inside the build folder

Pre-rendering is on by default, but should you need to disable it you can export an environment variable when you build the app:

DP_STATIC_RENDER=off yarn build