SolidJSS
SolidJS•2y ago•
3 replies
ikprk

createResource blocks navigation

I expect that I'm doing something against Solid rules, but I have no idea no to approach the debug.
It seems like createResoure is blocking the UI change till the Promise resolves.
export const SingleExchange = () => {
  const _exchange = useExchangeFromParams()


  const [repositoryQuery] = createResource(
    () => _exchange(),
    (exchange) => {
      if (!exchange) {
        throw Error('No exchange')
      }

      return exchange.fetchBalance()
    },
    {
      name: _exchange()?.name,
    }
  )

  debug(repositoryQuery)
  debug(_exchange)

  return (
    <RepositoryWrapper>
      // some UI for data
      {repositoryQuery()?.name}
    </RepositoryWrapper>
  )
}

export const useExchangeFromParams = () => {
  const params = useParams();
  const {
    exchangesService: { exchanges },
  } = useStore();

  return () => {
    return exchanges.find((e) => e.name === params.name);
  };
};


RepositoryWrapper is just HOC with error boundary and suspense. The problem is that when I refersh the page I can normally navigate between different exchanges without any delays, after one of them resolves. If one of exchanges is already resolved, next click on navigation that results in url param to change, I can see http request being sent for new view, but UI only changes after they resolve.
Was this page helpful?