#2257 ✓ staged
Brett Gaylor

Clean up what user sees while butter is loading

Reported by Brett Gaylor | September 7th, 2012 @ 06:40 PM | in 1.0 - Big Lebowski (closed)

It does seem weird stuff sizing the various editors etc, as well as a ghost of the old popcorn logo.

Comments and changes to this ticket

  • Kate Hudson

    Kate Hudson September 12th, 2012 @ 02:20 PM

    • State changed from “new” to “feedback-requested”
    • Assigned user set to “Brett Gaylor”
    • Milestone order changed from “90” to “0”

    Brett, can you post more detail and/or screen shots to describe what you mean? Maybe an STR or a description of what is expected/actual behaviour

  • Brett Gaylor

    Brett Gaylor September 13th, 2012 @ 07:22 AM

    • Assigned user changed from “Brett Gaylor” to “Kate Hudson”
    • Milestone order changed from “10” to “0”

    I'm referring to when you open the app, the tray and the inspector can take a moment to appear, and then bounce into their final location. You'll notice in more on slower connections. Basically, we need the same throbber we describe in another loading ticket to be used here.

    ANd we need to remove the old popcorn logo from the current loading.

  • Brett Gaylor

    Brett Gaylor September 17th, 2012 @ 01:20 PM

    • Milestone order changed from “48” to “0”

    I also notice that there is an odd input field with timecodes that presents itself for a moment.

    All this should be replaced by a "loading" screen, perhaps with the popcorn logo, that waits till the app is ready. Dont you think?

  • David Humphrey

    David Humphrey September 17th, 2012 @ 01:38 PM

    I wonder if we should visibility:hidden the main UI div until it's ready?

  • Kate Hudson

    Kate Hudson September 18th, 2012 @ 02:13 PM

    • Assigned user changed from “Kate Hudson” to “Bobby Richter”
    • Milestone order changed from “49” to “0”

    I think it would be cool if we could fade in the main UI div on ready using opacity. This is probably safest for flash player loading, etc.

    I don't think we should wait for mediaready, however. That can have its own loading UI (a spinning gif or something).

  • Bobby Richter

    Bobby Richter September 18th, 2012 @ 03:17 PM

    • Assigned user changed from “Bobby Richter” to “Kate Hudson”
    • Milestone order changed from “36” to “0”

    Couple of comments:

    • Remember how hated the giant loading screen was in the old app? Was that because it lacked detail? Or because it was a giant loading screen?
    • What 'main UI div' are we fading in here? When does it appear ready?

    I think we can isolate the things Brett's talking about and eliminate them. For example, the tray div is in its smaller state when it first appears, but the editor hasn't appeared yet. So, it bounces around until the UI is stable. That should be corrected anyway.

    Perhaps we can just expose all the pieces of the UI by sliding them in from their respective edges once ready is fired.

  • Kate Hudson

    Kate Hudson September 18th, 2012 @ 03:46 PM

    • Assigned user changed from “Kate Hudson” to “Bobby Richter”
    • Milestone order changed from “58” to “0”

    Good point, there isn't really a main wrapper to fade etc.

    Actually, sliding out both the tray and editor from their collapsed to expanded states would probably work fine.

  • Bobby Richter

    Bobby Richter September 18th, 2012 @ 04:28 PM

    • State changed from “feedback-requested” to “assigned”
  • Jon Buckley

    Jon Buckley October 1st, 2012 @ 02:18 PM

    • Milestone changed from 0.9 - Wrath of Khan to 1.0 - Big Lebowski
    • Milestone order changed from “36” to “0”
  • Brett Gaylor

    Brett Gaylor October 13th, 2012 @ 01:11 PM

    • Milestone order changed from “28” to “0”

    So to summarize:

    • remove old butter logo
    • Slide in tray and editor from collapsed states
    • ideally display some sort of throbber while the app does these things - popcorn maker logo superimposed similar to first run tool tips?
    • i've also noticed that we now see some odd links in upper left corner from tabzilla and other webmakerP things
  • Brett Gaylor

    Brett Gaylor October 13th, 2012 @ 01:12 PM

    • Title changed from “loading butter is janky” to “Clean up what user sees while butter is loading”
  • Brett Gaylor

    Brett Gaylor October 13th, 2012 @ 01:17 PM

    • Tag set to priority
  • Brett Gaylor

    Brett Gaylor October 31st, 2012 @ 01:37 PM

    • State changed from “assigned” to “hold”
    • Milestone order changed from “29” to “0”

    I'm fine with limiting this to whatever happens in #2760, but pushing remaining things such as tray animation to 1.1

  • Bobby Richter

    Bobby Richter November 1st, 2012 @ 06:38 PM

    There's actually another bug to consider here: when Butter is loading, you can access a lot of editors that you probably shouldn't be allowed to, like the media editor.

  • Brett Gaylor

    Brett Gaylor November 1st, 2012 @ 06:46 PM

    can you present a groovy tooltip that greys out the rest of the app, like what kate has for first run, until we're ready?

    I'm just concerned that this might take some iteration.

  • Bobby Richter

    Bobby Richter November 2nd, 2012 @ 03:23 PM

    • State changed from “hold” to “ui-feedback-requested”
    • Assigned user changed from “Bobby Richter” to “Kate Hudson”
    • Milestone order changed from “30” to “0”

    Kate: Think this is enough of a good change? Or should we add a grey-out "loading" modal div?

    https://github.com/mozilla/butter/pull/1342

  • Kate Hudson

    Kate Hudson November 2nd, 2012 @ 03:31 PM

    Personally I don't think we should grey out everything, particularly because if the app loads quickly (which hopefully it will ) it would create a really weird dark flash. We might be able to do something like a loading screen + spinny, but IMO that requires some new UI/something other than the current dialog module that is not really doable right now.

    Probably the best thing would be to collapse the editors as you have done and put some loading UI where the video is

  • Kate Hudson

    Kate Hudson November 2nd, 2012 @ 03:31 PM

    • Assigned user changed from “Kate Hudson” to “Bobby Richter”
    • Milestone order changed from “116” to “0”
  • Bobby Richter

    Bobby Richter November 2nd, 2012 @ 03:34 PM

    • State changed from “ui-feedback-requested” to “peer-review-requested”
    • Assigned user changed from “Bobby Richter” to “Kate Hudson”
    • Milestone order changed from “165” to “0”

    Ok. Let's just start with this patch then. It's simple and non-disruptive enough.

    Can you PR? I changed a bunch of CSS that needs sanity check.

  • Kate Hudson

    Kate Hudson November 2nd, 2012 @ 03:45 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Kate Hudson” to “Bobby Richter”
    • Milestone order changed from “118” to “0”

    So code looks good to me, .minimized should probably be prefixed.

    One more thing -- stage loading is still pretty janky. Anything you can do about that? Fade in the video wrapper with a bit of a delay or something?

  • Bobby Richter

    Bobby Richter November 2nd, 2012 @ 05:23 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “Bobby Richter” to “Kate Hudson”
    • Milestone order changed from “165” to “0”

    Loading screen implemented and reviews fixed.

  • Kate Hudson

    Kate Hudson November 2nd, 2012 @ 05:28 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Kate Hudson” to “Bobby Richter”
    • Milestone order changed from “120” to “0”

    Good for SR after whitespace fixes

  • Bobby Richter

    Bobby Richter November 2nd, 2012 @ 05:39 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “Bobby Richter” to “David Humphrey”
    • Milestone order changed from “167” to “0”

    Done.

  • Jon Buckley

    Jon Buckley November 2nd, 2012 @ 05:45 PM

    • Assigned user changed from “David Humphrey” to “Jon Buckley”
    • Milestone order changed from “74” to “0”
  • Jon Buckley

    Jon Buckley November 2nd, 2012 @ 06:50 PM

    • State changed from “super-review-requested” to “review-looks-good”
    • Assigned user changed from “Jon Buckley” to “Bobby Richter”
    • Milestone order changed from “88” to “0”

    SR+

  • Bobby Richter

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn Maker: Software package encompassing several sub-projects in order to deliver an entire popcorn experience.

Butter: Foundation for Popcorn-powered apps (including Popcorn Maker). Track data management, UI construction, other good stuff.

Cornfield: Server infrastructure to store and share popcorn-and-butter-based user data.

And other projects to allow maximal popcorn usability.

Tags

Referenced by

Pages