How do I show a Spinner while my React app is loading?

Question

How do I show a Spinner while my React app is loading?

1.5k Views Asked by Fergie At 20 October 2024 at 20:15

Is it possible to show a Spinner while my Word add-in (react app) is loading?

Obviously to use a Spinner you need to compile a React app, so I guess another way of stating the question is: is there a standalone version of the fabric Spinner?

Original Q&A

There are 2 best solutions below

H. Boe On 06 November 2018 at 08:35

I think what you need is fabric core.

https://developer.microsoft.com/en-us/fabric#/get-started#core

https://github.com/OfficeDev/office-ui-fabric-core

If it's not there, then there is no standalone spinner and you need to open an issue according to them.

**Mohamed Mansour** · Accepted Answer

Since React is not loaded yet, I would personally within the <div id="root"> Add the recommended CSS/HTML. Once React components gets loaded (Downloaded), it will automatically replace the "root" contents.

For example:

<body>
  <noscript>
     You need to enable JavaScript to run this app.
  </noscript>
  <div id="root">
    <style>
        #loader {
            background-color: #f2f2f2;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .spinner {
            border-radius: 50%;
            width: 5em;
            height: 5em;
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            border-top: 0.5em solid rgb(199, 224, 244);
            border-right: 0.5em solid rgb(199, 224, 244);
            border-bottom: 0.5em solid rgb(199, 224, 244);
            border-left: 0.5em solid rgb(0, 120, 212);
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }

        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <div id="loader">
        <div class="spinner"></div>
    </div>
  </div>

Your index.tsx would just be:

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

How do I show a Spinner while my React app is loading?

There are 2 best solutions below

Related Questions in OFFICE-JS

Related Questions in OFFICE-UI-FABRIC

Trending Questions

Popular # Hahtags

Popular Questions