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

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.

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

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

createResource blocks navigation

Similar Threads

createResource blocks navigation

Similar Threads

Similar Threads

Similar Threads