Not loading the full width of page

[shaneholloman]

My Example:
http://yoyo.io/css/

I have successfully integrated Pace to Wordpress using the http://roots.io theme
I get the same behaviour as your demo in which the progress from left to right falls short early - about 75-80% width of the page.

Yours is perfect:
http://github.hubspot.com/pace/docs/welcome/

Mine is not:
http://yoyo.io/css/

The css used is your minimal theme:

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace-inactive {
  display: none;
}

[zackbloom]

ghostTime should configure the minimum time the bar will sit at 100% before disappearing: https://github.com/HubSpot/pace/blob/master/pace.coffee#L16

Do you mind trying this before including the pace.js file?

window.paceOptions = {
  ghostTime: 5000
}

and let us know if it still disappears so easily?

[adamschwartz]

I can confirm that at 100%, PACE is rendering properly on your site:

@zackbloom is it possible pace-inactive is being set before 100% is reached?

[zackbloom]

Not really, it only gets added by the method I linked to above.

[adamschwartz]

Hmm, I got nothing then, sorry. 🐼

[shaneholloman]

@zackbloom @adamschwartz
Testing this now... are the results: http://yoyo.io/javascript/ after adding:

window.paceOptions = {
  ghostTime: 5000
}

to the bottom of pace.min.js

It seems to start loading late. Are either of you interested in the login to see what the issue might be inside a wordpress environment?

[zackbloom]

From looking at the page, I don't see that paceOptions block. It's loading late cause it's at the bottom of the body, if you move it into the head, it will be able to start earlier.

[shaneholloman]

@zackbloom
Hey Zach... it's there waay down at the bottom you will see if you inspect... I'm working on enqueing to the head of WordPress now : )

[zackbloom]

Yea, I see it now, I had tried finding it in the console before, no idea why I couldn't.

Because of how quickly pace tries to load, paceOptions actually has to be defined before the pace file is included. Flipping the order of the two in this file should do the trick: http://yoyo.io/wp-content/themes/yoyo-shoestrap-edd-child/assets/js/pace.min.js

[shaneholloman]

Zach

Do you mean flippling: window.paceOptions to paceOptions.window

to use this?:

paceOptions.window = {
  ghostTime: 5000
}

Sorry I'm an amateur in javascript

[zackbloom]

No worries @shaneholloman. I mean moving the window.paceOptions bit to above the body of that file, so it appears before /*! pace 0.4.16 */.

[Snoop]

Same problem here, also while testing it with jsfiddle.net, the Bar stops at about 70-80% before reaching the end. ghostTime indeed fixes it if about 700ms+ but this seems very strange to me. nprogress.js is doing this much better.

EDIT:
ok for what I see this is happening when the page has nothing to load, so the done event gets triggered very fast. Than the GhostTimer beginns to count 500ms, after that the bar disappears.

This is bad behavior, there should be an option to let it go to 100%, otherwise it will look strange and unprofessional.

Also it seems that the minTime option just gets ignored. I have set to 2000, but it will rate the ghostTime more important, which is not logical.

[zackbloom]

This was an ol' fashioned bug. Fixed in v0.5.0. Thanks @Snoop and @shaneholloman.

[sebszocinski]

This bug is still happening for me? using the latest version... any new solutions?