Progress bar?

[dmca-glasgow]

Hello,

I'm working on a project with a unified processor in the browser (in a Tauri app).

Some plugins can take quite a while, such as base64-encoding and inlining external assets, and others.

So I am thinking about implementing some kind of progress bar to entertain my waiting users...

I haven't found a project on GitHub that tries to accomplish this.

Any advice on how I should approach it?

My initial thought is some something that adds a logger plugin after each "real" plugin and increments (code not checked but hopefully you get the idea):

export function createProcessorWithLogs(
  plugins: PluggableList,
  onUpdate: UpdateHander
) {
  let counter = 0;
  const logger = createLogger(onUpdate, counter);

  const plugginsWithLogs = plugins.reduce((acc: PluggableList, plugin) => {
    acc.push(plugin, logger);
    return acc;
  }, []);

  return {
    processor: unified.use(plugginsWithLogs);
    total: plugins.length
  }
}

function createLogger(onUpdate: UpdateHander, counter: number) {
  return () => {
    onUpdate(counter++);
  };
}

I'm aiming for a data shape like this:

{ 
  progress: jobIdx / totalJobs, 
  currentJob: 'my job label' 
}

[ChristianMurphy]

Welcome @dmca-glasgow!

Taking a step back, before going too far down the rabbit hole consider two questions.

1. Do my plugins take a consistent amount of time? (Will the user get meaningful information from a plugin count?)
2. Do my users understand and care about which plugins are run? (Do labels make sense?)

If the answer to one or both of these is "no", a progress bar probably doesn't make sense.
And you may want to consider investing time in a nicely animated loader or spinner instead.

---

If you do choose to go down the progress bar route.
Some considerations:

1. plugin names probably won't make sense to user's you'll need a mapping to more user friendly names and descriptions
2. not all plugins run in order, parser plugins always run before everything else, compilers plugins always run after everything else
3. progress isn't linear, plugins will take different amounts of time, you'd probably want a weighting system to communicate how long likely remains

[dmca-glasgow]

Hi @ChristianMurphy, thanks for the reply.

A quick response to your questions/comments:

Do my plugins take a consistent amount of time?

No, it will vary wildly based on the input file.

Do my users understand and care about which plugins are run? (Do labels make sense?)

Erm, possibly... my users are university maths and stats lecturers who are converting their course notes to a (hopefully) more accessible format. Some are more technically minded than others.

plugin names probably won't make sense to user

Yes, if I show labels as well as a progress bar then I'll need to associate user-friendly names.. that shouldn't be too difficult to conjure up.

not all plugins run in order

Yes, I over-simplify this. Worse, some plugins can contain a parser and compiler and more.

progress isn't linear, plugins will take different amounts of time ... communicate how long likely remains

Ahh, I'm not so bothered about each step taking the same amount of time or communicating how long remains.

I'm thinking more of a checklist being ticked off (and ticked vs. total items could be displayed as a progress bar).

[ChristianMurphy]

No, it will vary wildly based on the input file.

If there's no meaningful way to measure progress, don't use a progress bar 😅

Erm, possibly... my users are university maths and stats lecturers who are converting their course notes to a (hopefully) more accessible format. Some are more technically minded than others.

It's up to you.
If you want to invest time in labels you don't think your users read, I'm not going to stop you, and can offer pointers.

But... it would be a lot easier to add a spinner like https://github.com/sindresorhus/ora
and rotate through entertaining phrases, it looks like your app is education focused, so maybe something like

• "Sharpening pencils and minds... please wait!"
• "Gathering all the A+ grades... almost there!"
• "Building bridges between neurons... stay tuned!"
• "Unlocking the secrets of the universe... just a moment!"
• "Mixing colors on the palette of knowledge... hold tight!"
• "Filling the chalkboard with brilliance... hang on!"
• "Gathering wisdom from the library of Alexandria... one sec!"
• "Piecing together the puzzle of learning... almost ready!"
• "Loading creativity and curiosity... get set!"
• "Crafting the perfect curriculum... please be patient!"

[dmca-glasgow]

Thanks for your help, I guess we have different opinions on what a progress bar is!

I have made something like this in the past a couple of times, so I'll have a go at something along the lines of passing addJob and completeJob callbacks in my custom plugins that I know can take longer than a few seconds, and I should be able to achieve some useful feedback to the user on what's happening.

For example, I can count the number of external assets I need to inline first (calling addJob) before doing the work (then calling completeJob).

This definitely falls into the "sprinkles" category that I'll have to get to later, but if I end up with something useful I'll report back here :)

[ChristianMurphy]

For example, I can count the number of external assets I need to inline first

Unified itself is only aware of one file at a time.
If your plugins have a more global view, feel free to leverage that, but there is no "unified" way of having that insight.