Nextjs Version 13: Implementing a Loading UI for Search Parameter Changes

Question

Nextjs Version 13: Implementing a Loading UI for Search Parameter Changes

I am working on a component that handles user input and updates search parameters accordingly. This results in a page refresh to display updated data on the UI. However, despite these actions, the loading.tsx file for this route is not being triggered.

After coming across similar issues reported by others on this GitHub thread, I wonder if there is a workaround to ensure that search parameters can trigger a loading screen?

While I acknowledge that using path parameters might solve the issue, it is essential for me to maintain URLs with search parameters.

javascript next.js navigation next.js13 urlsearchparams

Answer 1

Answer №1

After encountering a similar issue on GitHub, I tried using a "unique key" for the <Suspense /> component, but it didn't solve the problem for me. So, I came up with an alternative solution.

I switched from a server-side component to a client-side one.
Implemented data fetching in the useEffect hook and used loading as a state for the component.
Added a skeleton within the component and in the fallback of <Suspense /> (to address hydration error).

Here is an example of the code:

  const [data, setData] = useState<Product[] | undefined>(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    getData({categoryId, colorId, sizeId})
      .then((res) => {
        setData(res);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, [categoryId, colorId, sizeId]);

if (isLoading) return <ProductListLoading />;

return (
  <div>
    {data?.map((item) => ( // your logic here ))}
  </div>
);

Check out an example with loading inside the component and the Suspense with fallback approach

I hope this helps anyone facing a similar issue.

Answer 2

After encountering a similar issue on GitHub, I tried using a "unique key" for the <Suspense /> component, but it didn't solve the problem for me. So, I came up with an alternative solution.

I switched from a server-side component to a client-side one.
Implemented data fetching in the useEffect hook and used loading as a state for the component.
Added a skeleton within the component and in the fallback of <Suspense /> (to address hydration error).

Here is an example of the code:

  const [data, setData] = useState<Product[] | undefined>(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    getData({categoryId, colorId, sizeId})
      .then((res) => {
        setData(res);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, [categoryId, colorId, sizeId]);

if (isLoading) return <ProductListLoading />;

return (
  <div>
    {data?.map((item) => ( // your logic here ))}
  </div>
);

Check out an example with loading inside the component and the Suspense with fallback approach

I hope this helps anyone facing a similar issue.

Nextjs Version 13: Implementing a Loading UI for Search Parameter Changes

Answer №1

Similar questions

Change HTML canvas data into Angular form data before sending it to the Laravel backend

What is the best way to programmatically disable a button in JavaScript or jQuery when all the checkboxes in a grid are either disabled or unchecked?

Guide on retrieving the content type field value in Drupal and transferring it to a JavaScript file

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Contrast the positions (offsets) of two elements

Converting units to rem dynamically in CSS: a comprehensive guide

Utilizing React with a Bootstrap Select element populated by an API call. Following form submission, I aim to automatically deselect the previously selected

ASP.NET sending an AJAX request

Leveraging AJAX for implementing PHP scripts

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

Sorting alphabetically, either by JAVA, JavaScript, or Idoc script

What is the best way to assign a percentage width based on a variable in jQuery?

The Form is causing an error with the Ant Design Switch because of the value

The Vue instance methods provide a way to access and manipulate formatted properties

Showcasing a JSON attribute in the title using AngularJS

The AJAX POST request is not receiving the JSON data as expected

Can you explain the significance of the ColSpan property in the Material UI TablePagination?

Issue with VueJS: Cannot modify a component property within a watcher function

Changing the URI in accordance with the previous URI