'Outlook add-in is showing an empty html content upon first load

I am currently building an office 365 add-in on outlook and upon first load the add in is showing an empty html content like so before the whole add in render correctly after couple of seconds

<html>
 <head></head>
 <body></body>
</html>

First I thought it is from the office.then function shown below and I tried to add a spinner before the .then is called but the loader didn't show, and I couldn't find the reason behind this.

Note that the add-in is developed with react and the following is the index.js page Also note that the blank page is only showing on outlook for windows installed on a window 10 machine

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "../../store/store";
import 'react-app-polyfill/ie11';
import Spinner from '@atlaskit/spinner';

/* global AppCpntainer, Component, document, Office, module, React, require */
initializeIcons();

let isOfficeInitialized = false;
const title = "test";

const render = Component => {

ReactDOM.render(
  <Provider store={store}>
    <AppContainer>
      <Component title={title} isOfficeInitialized={isOfficeInitialized} />
   </AppContainer>
 </Provider>,
 document.getElementById("container")
  );
};

Office.onReady().then(function () {
 isOfficeInitialized = true;
  render(App);
});
render(App);

if (module.hot) {
 module.hot.accept("./components/App", () => {
   const NextApp = require("./components/App").default;
   render(NextApp);
  });
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Outlook add-in is showing an empty html content upon first load

Sources

Related Questions