SolidJS•4mo ago

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);
  };
};

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.

2 Replies

Brendonovich•4mo ago

Navigation happens inside a Transition, and loading the resource as part of the navigation causes the transition to wait until the resource is loaded, preventing the page from being updated. You should be able to wrap your elements in Suspense to prevent the transition from waiting for the page to load

ikprkOP•4mo ago

Unfortunately, the issue is still there. RepositoryWrapper is already using Suspense. Plus I tried to wrap new component that calls createResource with Suspense - same result. Managed toget this to work. Ironically Suspense was the problem, after removing it, it works flawlessly 🤔

Gaming

Programming

createResource blocks navigation