UI Design: Editor not available states

[joepavitt]

Related Issue

3655

Description

Need to fill this red space when the Editor is not available. See #3655 for the various reasons the Editor may not yet be accessible.

Considerations:

• For Product
• Lottie/SVG Animation
• Need to consider where the text-version of the status (e.g. loading, installing, suspended, error, etc) will go.

Inspirations:

• https://lottiefiles.com/search?q=loading+square&category=animations&page=1
• Somehow utilising a Node-RED grid?
• Maybe even showing a temporary Node-RED flow that animates to show it's being build, etc.
• Edge glow along grid lines of the Node-RED Editor?
• Embedded window view, with the status reflected accordingly? e.g. this - would definitely scale better, and clearly distinguish state from not available to available?

[joepavitt]

Pulsation through grid. Not a fan of this, but was my first thought, so sharing at least.

[joepavitt]

Embedded window animation style:

Available in Figma here

[Yndira-E]

So these are all possible states:

• Suspended
• Error
• Crashed
• Starting
• Installing

In general, the text highlighting the state would be part of the composition.

Idea 1 Regarding this option, I saw your comment about making the small window different for each state, but I think it might be too detailed for that size? Maybe not obvious enough? Also, the FlowFuse flow from our icon in the background... I don't like when it doesn't have the full square because it seems cut off for no reason... But surely we can find a workaround for that.

Idea 2 For "starting" and "installing," I'm thinking some ghost state of the UI could do the trick, not just a small window but using the space of the actual UI, something like:

With changing opacity in a loop until it's fully loaded. Kind of like: https://lottiefiles.com/animations/skeleton-frame-loading-JVx9aHWX5B?from=search

For the other three, what's the difference between "suspended," "error," and "crashed"?

It wouldn't make sense to have the ghost UI since it simply won't ever show up, right? What would be the next possible step that the user should take for a "suspended," "crash," or "error" state? Just thinking if there's a button or CTA that needs to be added.

Idea 3 On the other hand, the idea you suggested of the flow being built could work too, something like this one: https://lottiefiles.com/animations/loading-animation-j7BG8cPg6H?from=search for "starting" and "installing." For the other states, the flow can't be built, the loop starts building the node but when it tries to connect/create a new one, a red X or a ! would appear.

WDYT?

[joepavitt]

On the other hand, the idea you suggested of the flow being built could work too, something like this one: https://lottiefiles.com/animations/loading-animation-j7BG8cPg6H?from=search for "starting" and "installing.

This is what I had in mind. Using the "ghost" state as the building block. With installing, it's animating nodes being added to the left-side palette. For "Starting", it's adding nodes to the flow editor

"suspended," "error," and "crashed"

Suspended: The user has explicitly chosen to pause operation of the Instance Error/Crashed: I'm not sure on the difference here either, and we have no docs on the matter, @knolleary can you clarify please?

[joepavitt]

@Yndira-E fyi - different states are now documented here: https://flowfuse.com/docs/contribute/workflows/project-states/

[Yndira-E]

@joepavitt could we have a quick call tomorrow? I have a couple of questions and it would be quicker on a call.

[joepavitt]

Small, first iteration, let's group some states together:

• Installing/Starting/Loading/Restarting - Something is being built/loaded, the flow is being put together
• Suspending - Bit of an odd one, @hardillb how quickly after clicking this action is access to the Editor lost? We need to know if it's worth building an animation for this state to show in place of the editor.
• Suspended - The instance has stopped, but the user expected it to be stopped, so it's a "happy" state, but with no activity. Similar to a "disabled" state, as opposed to an "error" state
• Stopped/Crashed - Error state, the instance has stopped, and we were not expecting it to, likely showing red colouring, things falling over.

[hardillb]

@joepavitt I would remove access to the editor as soon as the suspend action is triggered.

Suspend is going to try and stop the Node-RED process straight away, it will wait for up to 10 seconds, but the editor should be considered disconnected straight away

[joepavitt]

Thanks Ben - in that case, we need a "Suspending" state too please @Yndira-E

[Yndira-E]

@joepavitt first iteration here.

I've used bodymovin because they don't 'force' me to upload it anywhere and lottie does. I've created that folder and if you open the live view of that HTML, you'll be able to see all the states. Here are the steps I followed.

Note: the suspending loop needs to be in reverse, hence the line animation1.setDirection(-1);

[joepavitt]

Lottie doesn't force you to upload anything?

[Yndira-E]

LottieFiles does

A "workspace" is like a folder on their platform.

The result is basically the same, I just get to skip that part using a different plugin.

And, if you prefer linking the animations from that platform, you can upload the JSON files to a workspace of your choice. I just don't like depending on a third-party platform.

[joepavitt]

Ah, that's a new business model since I last used it. Thanks for sharing. We'll use local files anyway, so other plugin is fine!

[joepavitt]

They do feel a little cartoonish for FF, but as first iteration they'll be okay.

Loading/Suspending: I think the links are the reason they look a little cartoonish. Is it possible to make the links look a little more Node-RED in their appearance? Thicker slightly for sure, but the actual shape of the links are too circular.

Crashed: It took a few watched to realise what the cracks were. Might be worth adding a darker red tone into the crack to give it shadow/depth?

Suspended: The indigo doesn't fit here, should be from the Blue palette, and the pause icon can be a little smaller.

[Yndira-E]

Hi @joepavitt I've just updated the files following your suggestions 😉

[joepavitt]

Can close this out as the design work is done