The next thing I would like to take care of is putting on a loading spinner of the preview window.
Remember right now, although we can bundle our code very quickly, eventually a user might be importing
modules off of NPM that can take several seconds to bundle.
And if it's going to take a long time to bundle that user's code, we want to somehow tell them.
We want them to be aware that we are actively bundling their code.
But it might still take a little bit of time because otherwise we're just going to essentially do nothing
between the code editor and the preview window.
And the user will be wondering why is my prevue not showing up or something like that?
So to handle this, we'll go back over to our code cell component.
First we need to do is identify what scenarios we want to or in which scenarios we want to show a loading
spinner.
The first one will be if we don't have a bundle object.
So if Bundle comes back as undefined.
Then that means we just don't have any content to show to the user yet, so we will probably want to
show them some kind of loading spinner or something like that.
The other scenario will be if we have a bundle, but loading is true.
Self-loading is true.
That means we are still actively processing their code and we do not want to show the preview window
yet.
Instead, we want to show a loading spinner.
So let's take care of these two cases down side of our Geass block.
OK, so here's where we currently show preview we're going to do on the line above it a little bit more
complicated check to decide what content we want to show.
We're going to say if there is no bundle.
Or if bundle loading is true, then in that scenario, we want to show a loading spinner, so we're
going to use a ternary expression for this.
It's going to put the first case on the next line down, but on a div.
That says loading.
And then and the other case, so if this evaluates to false, that must mean that we are all ready to
show the user a preview.
So that's going to be where we put in our preview component like so.
Now, just double check and make sure you've got the correct syntax here.
Again, this is a turnour expression, so we should have a check right there, then a question mark
and then a colon.
It's going to save this, it will get reformatted, but again, still means that are still the exact
same code.
Well, then flip back over to a quick refresh and you'll see it loading up here for a very small amount
of time.
And then we get the preview window showing up.
All right.
Well, that looks reasonable.
Of course, we probably want to show something.
It looks a little bit more like a loading spinner than the word loading, but we'll take care of that
in just a moment.
So if I refresh again, I see loading until the bundle is ready to go.
Then if I also start to add in some code right here, like let's say blah, blah, blah.
Then, for just the smallest instance, I do see the text that says loading up right there and eventually
it goes back to the preview window.
If we start to import some larger libraries, like, let's say if I import, react from react and react,
Dom from react Dom.
Then I see the loading on there for just a little bit longer, and of course, if I start to import
libraries that I have not yet cached onto my local machine, we would see it loading up here for an
even longer duration as our bundler logic reaches out to unpackaged to download all the relevant files.
So I think this works somewhat OK right now, but of course we need to show a better message to the
user than just a div that says loading.
So let's take care of a little bit of styling improvement in just a moment.