f / react-wait Goto Github PK

I've been using the library for a while and I noticed that I could simplify my code with something like composing of the waiters. For example, given that I have two waiters bar and baz, I would like to have foo waiter that is waiting if one of bar or baz is waiting.

Motivation

Now, first I was thinking about adding array argument support to isWaiting so that I could call isWaiting(["foo", "bar"]) or a bit more explicit convenience function isAnyWaiting(["foo", "bar"]).

But after looking into my code I realized it's not enough. In my case, I have some big component
Foo rendering smaller components Bar and Baz that wait on each other. That works fine with current API. It gets more convoluted when you would like to have some other component Qux that doesn't exactly want to know about the lower-level ones but needs to know if Foo or any of it's children waits. So currently in Qux you would need to write

const isFooWaiting = isWaiting("baz") && isWaiting("baz")

That's not ideal because Qux needs to know too much about Foo internals.

Proposal

Create a separate method that will create a new waiter if one of the child waiters is waiting. It could be similar in usage to createWaitingContext:

const { compose } = useWait();
const { isWaiting } = compose("Foo", ["Bar", "Baz"])

• Foo is a waiter, you can check if it's waiting with isWaiting("Foo")
• Foo is always waiting if Bar or Baz is waiting.
• the open question is should you be able to manually start and end a composed waiter?

Anternative idea

Maybe instead adding a compose method, we could compose Waiter providers? It's just an idea, I don't know if it's possible or makes sense but provier could have an optional name and be a child of another warapper like this?

<Waiter>
  <Waiter name="foo">
    // ...
  </Waiter>
</Waiter>

Then if the inner's anyWaiting() is true, foo is waiting in the outer waiter?
Again, it's just an idea.

Hi there!
Thank you for this awesome library.
I experienced a kind of weird behavior while working with this library.

Description
if I use method startWaiting in useEffect hook like

useEffect(() => {
   startWaiting('first');
   startWaiting('second');
}, []); 

Result
waiters array contains only 'second' waiter, so waiters array is overwritten.

the same issue would be in the example below:

component1:

const Component1 = () => {

 useEffect(() => {
     const fetchData = async () => {
         startWaiting('first');
         const response = await apiCall();
         endWaiting('first');
     }
     fetchData();
 }, []);

return (/*react markup and Wait component inside*/);

component2:

const Component2 = () => {

 useEffect(() => {
     const fetchData = async () => {
         startWaiting('second');
         const response = await anotherApiCall();
         endWaiting('second');
     }
     fetchData(); 
 }, []);

return (/*react markup and Wait component inside*/);

component3:

const Component3 = () => 
(
<Waiter>
   <Component1 />
   <Component2 />
</Waiter>
);

in this case, every time I am trying to receive waiters array it will contain only 'second'.

Hey!

This lib seems awesome, but there's one api function that's missing for us before we decide to use it. Our usecase is that we have multiple components with separate datasources that we need to keep track of the loading state for. We're playing around with the idea of having a progress bar, but for that we'd need to keep track of all the current waiters. anyWaiters gets us far, but we'd need the actual length to make something useful happen in terms of loading bars.

What do you think, is this a decent idea or does it not belong in this repo?

Hi, the React team has launced Suspense for data loading and is about to release it for concurrent updates. Is this library using that or is this is a custom solution?

I would like to check if I could start contributing to this project by proofreading the Readme documentation.

Thank you for this convenient library.

Is it possible to implement a withWait() HOC to allow class components to use react-wait ?

Hello could you tell me if it compatible with nextjs and server rendering?

I'm getting an error n.useState is not a function

TypeError: n.useState is not a function
at exports.Waiter (/app/node_modules/react-wait/dist/react-wait.js:23:13)
at processChild (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2475:14)
at resolve (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2401:5)
at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2728:22)
at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2699:25)
at renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3113:25)
at renderPage (/app/node_modules/next/dist/server/render.js:319:26)
at Function.getInitialProps (/app/node_modules/next/dist/server/document.js:65:25)
at _callee$ (/app/node_modules/next/dist/lib/utils.js:86:30)
at tryCatch (/app/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/app/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (/app/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (/app/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
at _next (/app/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
at /app/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
at new Promise ()

I'm using nextjs version 7.0.2

or something different can cause this error?