progress guessing

[bryanrasmussen]

this isn't so much an issue as a request for new functionality in line with the fetch progress indicators project https://github.com/AnthumChris/fetch-progress-indicators so that I could pass to my Loading fallback how many bytes there were in all to get and how much was left. (or is that actually possible now, haven't gone through the code)

I can fork and make pull request on this if you want

[dai-shi]

Hey, thanks for opening up the discussion.
The "fetch" in this lib is not tied to the Fetch API, but it can be any async functions.
Furthermore, I don't think we can return state while in suspense, so I'm not sure how to implement the progress indicator. "Incremental loading" is a similar idea, but it's for multiple async functions.

pass to my Loading fallback

Ah, so it's a callback function. That may work, but still the indicator must be shown in non-suspended component, which sounds a bit weird.

[bryanrasmussen]

hmm, ok sorry I had misunderstood and thought it was just basically for using fetch with suspense.

basically I'm working on a loading animation article where the loading is an svg animation with some guesstimation as to when load complete helping to set the animation (so instead of a indefinitely recurring animation you get an animation that goes from 0 to complete [or goes away when before complete reached because first data being shown])

and I was hoping to combine the loading animation guessing technique with render-as-you-fetch somehow.

[dai-shi]

The basic idea seems good. Let's assume we only used the Fetch API and could know the progress. Do you show the loading svg animation in the Suspense fallback? A question is how the svg gets progress information.

[bryanrasmussen]

right, I would assume in the fallback had a component Loading that took props, so in a just straight ahead fetch usage I would probably do something like is done here https://github.com/AnthumChris/fetch-progress-indicators/blob/master/fetch-basic/supported-browser.js which is used in this example https://fetch-progress.anthum.com/fetch-basic/ but now thinking of it, it does seem the two methods are incompatible - Render-as-You-Fetch is closer to https://fetch-progress.anthum.com/sw-basic/ Which in that case the loading animation might be presented next to the rendering results - we are rendering your results and the animation shows how close you are to having all results.

…

On Sat, Aug 1, 2020 at 8:37 AM Daishi Kato ***@***.***> wrote: The basic idea seems good. Let's assume we only used the Fetch API and could know the progress. Do you show the loading svg animation in the Suspense fallback? A question is how the svg gets progress information. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACMIQFKQAPUEX2NU7CIRODR6OZ4JANCNFSM4PROH3OA> .

[dai-shi]

Thanks for the examples.

If you were to use <Suspense fallback={<Loading progress={progress} />}, I'd expect we could load multiple images under the tree. In other words, if the progress is just for one image, we wouldn't need Suspense, but just use the current (traditional) React, maybe?

[bryanrasmussen]

Right, it was just an example of using a single request's progress, not necessarily what I wanted to do.

…

On Sun, Aug 2, 2020 at 12:16 AM Daishi Kato ***@***.***> wrote: Thanks for the examples. If you were to use <Suspense fallback={<Loading progress={progress} />}, I'd expect we could load multiple images under the tree. In other words, if the progress is just for one image, we wouldn't need Suspense, but just use the current (traditional) React, maybe? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACMIQDQKIBOSB4OXX7VILLR6SH4XANCNFSM4PROH3OA> .