### Author:  [@envieme](https://meta.discourse.org/u/envieme)
#### Post date: [2016 年4 月 22 日 11:00 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/1 "2016-04-22T11:00:57Z")
I am on a very slow internet connection in a rural area now. And when initially loading my discourse instance, it takes like 2-3 minutes with a blank screen and suddenly everything appears. So i guess it is loading all the assests and the app in the background in that time.
It would be nice to see a fast loading static html page with a loading… until the actual loading of the app has been completed in the background for such slow connections i feel.
Related:
> [@The initial page load](https://meta.discourse.org/t/the-initial-page-load/17323/7):
>
> Since we’re talking 3-4 seconds; could a loading indicator make that initial pageload feel more meaningful and somewhat shorter?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2016 年4 月 22 日 19:39 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/2 "2016-04-22T19:39:47Z")
Sure, feel free to submit a pull request that adds this!
---
### Author:  [@charleswalter](https://meta.discourse.org/u/charleswalter)
#### Post date: [2016 年4 月 24 日 11:44 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/3 "2016-04-24T11:44:48Z")
Preaching to the choir.
@codinghorror, if we were able to insert html to lod right after the body tag, wouldnt that show right away? There should be html / js that can be added that could then disappear upon page load.
---
### Author:  [@envieme](https://meta.discourse.org/u/envieme)
#### Post date: [2016 年4 月 24 日 11:44 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/4 "2016-04-24T11:44:52Z")
Sorry, I am not a technical person though I can manage editing css, write the html page, build discourse app and manage my droplets on DO. If someone can guide me a bit, I can try.
---
### Author:  [@designbygio](https://meta.discourse.org/u/designbygio)
#### Post date: [2017 年3 月 2 日 15:00 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/5 "2017-03-02T15:00:06Z")
As already said in different trends ([here](https://meta.discourse.org/t/the-initial-page-load/17323/16) and [here](https://meta.discourse.org/t/should-discourse-adopt-embers-fastboot/23843/7)) the best solution would be to install fastboot in discourse but since this is quite big task which will require more time i suggest within this issue to implement a middle-way solution which will give feedbacks to the users about the app loading even if it will be not the most useful informations.
A recent approach in the design world is the [skeleton screen preloading](http://www.lukew.com/ff/entry.asp?1797), a blank version of a page into which information is gradually loaded, currently used by Facebook and some other important applications.
This give to the users the feeling the page is being build and avoid the frustration coming from the constant looking of loading icons.
I found two way to implement this technique:
- Pure css: [http://codepen.io/basham/pen/cGJjn](http://codepen.io/basham/pen/cGJjn)
- Ember Blur Up: [GitHub - Ludu/ember-blur-up: Sexy progressive loading for large background images · GitHub](https://github.com/Ludu/ember-blur-up) (to test if work correctly with discourse)
We should anyway keep in mind that long wait time should go along with a [progress loader indicator](https://www.nngroup.com/articles/progress-indicators/)
What do you think?
* * *
Other interesting resources:
> **[LukeW | Mobile Design Details: Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)**
>
> Conventional wisdom tells us that when things are going to take a while, we should let people know. In most mobile applications that translates to adding progre...
>
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2017 年3 月 2 日 15:54 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/6 "2017-03-02T15:54:29Z")
I like the idea of using a “skeleton screen” also for a starting page that’s loading. We actually have a concept of this already, but strictly for topics. You can find a really long topic and test it yourself:
[https://erlend-sh.github.io/erlend-new/d15-placeholderscrolling.mp4](https://erlend-sh.github.io/erlend-new/d15-placeholderscrolling.mp4)
@eviltrout do you think there’s a way we could reuse that for an initial page load?
> [@designbygio](#):
>
> We should anyway keep in mind that long wait time should go along with a progress loader indicator
Hmmm, maybe we could sneak a loader animation into the placeholders themselves somehow? Like one of the mock text bars going from left to right as if to finish the paragraph. Ideally you’d never notice it until you run into a longer page load.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2017 年3 月 2 日 16:06 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/7 "2017-03-02T16:06:07Z")
If we did that for initial page load you’d get quite a bit of a [Flash of Unstyled Content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) effect that I suspect would look much worse.
---
### Author:  [@designbygio](https://meta.discourse.org/u/designbygio)
#### Post date: [2017 年3 月 3 日 11:44 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/8 "2017-03-03T11:44:12Z")
Oh cool. i didn’t notice you already have for topics!
@eviltrout so are you suggesting to add a simlper loader?
Maybe the best solution would be to add a simpler loader icon and if the loading take mor ethen 2 sec, use the skeleton screen.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2017 年3 月 3 日 15:47 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/9 "2017-03-03T15:47:17Z")
No I’m not suggesting that right now. Long term I would love something like FastBoot but as you pointed out it’s a lot of work.
I think we can live with longer loading times for now – Discourse is the type of App people spend a long time using once it’s loaded, unlike a lot of content sites – it’s not hurting us much right now to load a little longer.
In the future as we switch the asset pipeline to something else, we can look at ember engines and splitting our app into smaller chunks that will help tremendously.
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2017 年3 月 3 日 18:32 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/10 "2017-03-03T18:32:06Z")
So nevermind the skeleton layout, but what about a very basic loader? One good example is LinkedIn, which I believe is using Ember as well:
[ ](https://vimeo.com/206615547)
They do a bit of skeleton magic as well, but all I wanna point out is the loader. Their first-load time is quite long, but the load animation makes it way more bearable.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017 年3 月 3 日 20:11 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/11 "2017-03-03T20:11:14Z")
Errrr we already have this? It’s the spinning circle outline?
---
### Author:  [@fefrei](https://meta.discourse.org/u/fefrei)
#### Post date: [2017 年3 月 3 日 20:18 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/12 "2017-03-03T20:18:44Z")
Really? I’ve never seen the spinner appear on the initial page load…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017 年3 月 3 日 20:20 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/13 "2017-03-03T20:20:09Z")
I dunno if a whole bunch of risky work is necessary for that one particular case, when we already do display a loading spinner in _literally every other case_.
If it’s possible without breaking anything, and without a ton of engineering time… perhaps?
Even better than “add a first load animation” is to simply **make first load fast enough that no animation is needed**. Certainly a more effective use of our engineering time.
---
### Author:  [@designbygio](https://meta.discourse.org/u/designbygio)
#### Post date: [2017 年3 月 6 日 10:59 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/14 "2017-03-06T10:59:20Z")
Agree with @codinghorror even if a loader/animation like the Linkedin one, is actuallty very fast to implement.
Nevertheless we could still have Flash of Unstyled Content.
That doesn’t dipend from the loader image or technique but mostly by the loading time.
Is there an easy way to show the loader just if the loading time is above 1.5 seconds or so? I think so.
But from @eviltrout words, i understood he would prefer to postponed this issue and speed up the loading time instead (at one point in the near future).
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2017 年3 月 6 日 22:43 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/15 "2017-03-06T22:43:25Z")
> [@designbygio](#):
>
> speed up the loading time instead (at one point in the near future).
This is Discourse on Chrome Beta, it’s loading from splash to functional app without any blank screen when using the improved [Add to Home screen](https://meta.discourse.org/t/add-to-homescreen-banner-on-android/42973)
[https://fat.gfycat.com/DeepSneakyAfricanharrierhawk.mp4](https://fat.gfycat.com/DeepSneakyAfricanharrierhawk.mp4)
---
### Author:  [@designbygio](https://meta.discourse.org/u/designbygio)
#### Post date: [2017 年3 月 7 日 12:54 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/16 "2017-03-07T12:54:47Z")
That’s nice!! I would add a little animation, to give feeling of something loading but anyway is nice.
Do we want to try to implement this and see if it works smooth?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2017 年3 月 7 日 13:14 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/17 "2017-03-07T13:14:28Z")
> [@designbygio](#):
>
> That’s nice!! I would add a little animation, to give feeling of something loading but anyway is nice.
>
> Do we want to try to implement this and see if it works smooth?
The splash is generated by Android automatically and we have no control over it.
I agre with @eviltrout that we can wait a bit on this, we got much faster last year (brotli, smaller payloads, HTTP/2, latest EmberJS) and will probably get more speed this year (Chrome new JS runtime, HTTP/2 Push).
---
### Author:  [@designbygio](https://meta.discourse.org/u/designbygio)
#### Post date: [2017 年3 月 7 日 13:18 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/18 "2017-03-07T13:18:54Z")
ok, so look like most of the people think is not worth to implement it now.
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2017 年3 月 13 日 05:19 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/19 "2017-03-13T05:19:54Z")
> [@designbygio](#):
>
> Nevertheless we could still have Flash of Unstyled Content.
Can’t you avoid the FOUC if the loading indicator uses entirely inline styles and data: images? Which is reasonable for something handcrafted to be small I think.
---
### Author:  [@daveaevion](https://meta.discourse.org/u/daveaevion)
#### Post date: [2018 年3 月 30 日 07:56 UTC](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/20 "2018-03-30T07:56:31Z")
Here’s a CSS hack if y’all are still interested:
> [@Found a workable CSS hack to show spinner/loader on slow initial load](https://meta.discourse.org/t/found-a-workable-css-hack-to-show-spinner-loader-on-slow-initial-load/84199):
>
> I’ve read a few posts about people wanting a spinner or loading image for the initial discourse load as it may be quite slower than subsequent loads. I realize this is a CSS hack and not a fancy or beautiful fix, but it is working well enough for my discourse needs. Update with theme component [https://github.com/daveaevion/discourse-spinner-theme-component](https://github.com/daveaevion/discourse-spinner-theme-component) If you want to use the discourse spinner on the initial load in addition to between page loads, follow the following steps. Step 1: Add …
[Next page](https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981.md?page=2)