useNavigationProgress? #54

ryanflorence · 2020-11-18T18:52:17Z

On a page navigation we do a few async things:

Load a manifest patch
Load styles
Load modules
Load data
(Future) preload other resources

I'm imagining building a loading indicator in the global layout that's a progress bar. On any navigation remix knows exactly how many resources it's going to load once the manifest is received, so we could set state on the progress and be able to create an accurate progress indicator.

import { useNavigationProgress } from "@remix-run/react"

export default function NavigationProgressBar() {
  let progress = useNavigationProgress();
  return progress
    ? <ProgressBar progress={progress.completed.length/progress.total.length} />
    : null;
}

- removed global-loader.js - removed `<Remix ErrorBoundary/>` prop - added root.js as a normal Route Module - can export ErrorBoundary - can export loader closes #54

- adds `useTransition` for finer grained control over pending indicators and optimistic UI - adds "submission keys" to get the transition for a specific form's submissions rather than the global transition, allowing apps to create complex UIs with a lot of mutations happening at the same time - adds support for concurrent form submissions (#151) - adds route module `shouldReload` to optimize which routes should reload on form submission reloads or search param changes (#181, #175) - reloads data when links to the current url are clicked (#128) - provides state change updates on navigations (#54-ish) - fixed issues with submitting a form multiple times quickly that completely broke the app before - is mostly Remix agnostic, so we should be able to bring it over to React Router without to much headache Closes #151, #181, #175, #128, #54, #208

ryanflorence · 2021-08-04T23:29:45Z

kinda closed by 9983f88

This is kinda big but opens up a lot of use cases, ## useTransition: - can build better pending navigation UI with useTransition telling app more detailed information (state, type) - replaces usePendingFormSubmit and usePendingLocation - actually aborts stale submissions/loads - fixes bugs around interrupted submissions/navigations ## useActionData - actions can return data now - super useful for form validation, no more screwing around with sessions ## useFetcher - allows apps to call loaders and actions outside of navigation - manages cancellation of stale submissions and loads - reloads route data after actions - commits the freshest reloaded data along the way when there are multiple inflight ## experimental_shouldReload allows route modules to decide if they should reload or not - after submissions - when the search params change - when the same href is navigated to ## other stuff - reloads route data when the same href is navigated to - does not create ghost history entries on interrupted navigation ## Deprecations These old hooks still work, but have been deprecated for the new hooks. - useRouteData -> useLoaderData - usePendingFormSubmit -> useTransition().submission - usePendingLocation -> useTransition().location Closes #169, #151, #175, #128, #54, #208

This is kinda big but opens up a lot of use cases, - can build better pending navigation UI with useTransition telling app more detailed information (state, type) - replaces usePendingFormSubmit and usePendingLocation - actually aborts stale submissions/loads - fixes bugs around interrupted submissions/navigations - actions can return data now - super useful for form validation, no more screwing around with sessions - allows apps to call loaders and actions outside of navigation - manages cancellation of stale submissions and loads - reloads route data after actions - commits the freshest reloaded data along the way when there are multiple inflight allows route modules to decide if they should reload or not - after submissions - when the search params change - when the same href is navigated to - reloads route data when the same href is navigated to - does not create ghost history entries on interrupted navigation These old hooks still work, but have been deprecated for the new hooks. - useRouteData -> useLoaderData - usePendingFormSubmit -> useTransition().submission - usePendingLocation -> useTransition().location Closes #169, #151, #175, #128, #54, #208

This is kinda big but opens up a lot of use cases, - can build better pending navigation UI with useTransition telling app more detailed information (state, type) - replaces usePendingFormSubmit and usePendingLocation - actually aborts stale submissions/loads - fixes bugs around interrupted submissions/navigations - actions can return data now - super useful for form validation, no more screwing around with sessions - allows apps to call loaders and actions outside of navigation - manages cancellation of stale submissions and loads - reloads route data after actions - commits the freshest reloaded data along the way when there are multiple inflight allows route modules to decide if they should reload or not - after submissions - when the search params change - when the same href is navigated to other stuff - reloads route data when the same href is navigated to - does not create ghost history entries on interrupted navigation These old hooks still work, but have been deprecated for the new hooks. - useRouteData -> useLoaderData - usePendingFormSubmit -> useTransition().submission - usePendingLocation -> useTransition().location Also includes a helping of docs updates Closes #169, #151, #175, #128, #54, #208

ryanflorence added the enhancement New feature or request label Nov 18, 2020

mjackson pushed a commit that referenced this issue May 1, 2021

added root layout route

6a64116

- removed global-loader.js - removed `<Remix ErrorBoundary/>` prop - added root.js as a normal Route Module - can export ErrorBoundary - can export loader closes #54

ryanflorence closed this as completed Aug 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useNavigationProgress? #54

useNavigationProgress? #54

ryanflorence commented Nov 18, 2020 •

edited

Loading

ryanflorence commented Aug 4, 2021

useNavigationProgress? #54

useNavigationProgress? #54

Comments

ryanflorence commented Nov 18, 2020 • edited Loading

ryanflorence commented Aug 4, 2021

ryanflorence commented Nov 18, 2020 •

edited

Loading