Showing "Connecting in progress" status

[Maciej Sawicki]

Currently if Meteor is connecting the counter shows 0 for couple of seconds. This is not the best feedback for user. Is there a chance you add this to this package so that a different container will show up when status is 'connecting'?

[Maciej Sawicki]

Here's my current solution for this issue. @255kb You might consider adding this into the package. Note the use of https://github.com/meteor/meteor/wiki/Tracker-Manual#detecting-the-first-run not to show this on first connection

    Tracker.autorun(function(computation) {
        var connectionStatus = Meteor.status().status;

        if (computation.firstRun === false) {
            if (connectionStatus === 'connecting') {
                $('.connectingInProgressBar').removeClass('hidden');
            } else {
                //without setTimeout this will blink too fast to be read 
                setTimeout(function() {
                    $('.connectingInProgressBar').addClass('hidden');
                }, 3000);
            }
        }

    });

<template name="connectionStatusBars">
    <div class="connectionStatusBars">
        {{> meteorStatus msgText='No connection. Retrying in %delay%s'}}
        {{> connectingInProgressStatus}}
    </div>
</template>

<template name="connectingInProgressStatus">
    <div class="connectingInProgressBar hidden">
        <div class="connectionPreloader"></div>
        <div class="connectionInProgressText">Connecting...</div>
    </div>
</template>

Styling the connecting bar and adding preloader

.connectingInProgressBar {
    position: absolute;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    color: #fff;
    padding: 15px;
    line-height: 40px;
}

.connectingInProgressBar.hidden {
    display: none;
}

.connectionPreloader {
    display: inline-block;
    float: left;
    height: 16px;
    position: relative;
    top: 12px;
    margin-right: 8px;
    width: 16px;
    border-radius: 50%;
    border-top: 2px solid #888;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    //you need to have the animation keyframes defined somewhere else
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
     -webkit-animation: rotate 0.8s infinite linear;
     animation: rotate 0.8s infinite linear;
}

Overriding default package styles

.connectionStatusBars {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

.meteor-status {
    background-color: #FF0000;
    color: #fff;
    font-family: inherit;
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    line-height: 40px;
    padding: 15px;
    box-shadow: none;
    z-index: 9999;
}

.meteor-status a, .meteor-status a:focus, .meteor-status a:hover, .meteor-status a:active {
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;
    padding: 5px 9px;
    border-radius: 5px;
    border: 1px solid #fff;
    display: inline-block;
    line-height: 24px;
}

Which gives you something like this (sorry for bad GIF)

[Guillaume]

Hi, thanks for the suggestion, I implemented this behavior in the latest version (1.5.0) but instead of displaying a totally different UI element the package is displaying a different text while connecting like "connecting...", instead of "next retry in 0s".
FR and EN translations are available, but you can use your own text with textDisconnected and textConnecting parameters.

I preferred to keep it simple, hope you understand and that this update will help you :)