fix: loading flickering with old data present

This fixes the flickering and unnecessary reloads on repeated navigation
to the Advisories and Packages pages, by using layout effects to force
loading before paint.

Author: dominikvagner

src/SmartComponents/Advisories/Advisories.js

@@ -1,5 +1,5 @@
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import messages from '../../Messages';
 import publishDateFilter from '../../PresentationalComponents/Filters/PublishDateFilter';
@@ -69,7 +69,7 @@ const Advisories = () => {
 
   const [isRemediationLoading, setRemediationLoading] = React.useState(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (firstMount) {
       apply(decodeQueryparams('?' + searchParams.toString()));
       setFirstMount(false);

src/SmartComponents/Packages/Packages.js

@@ -1,5 +1,5 @@
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import messages from '../../Messages';
 import packagesListStatusFilter from '../../PresentationalComponents/Filters/PackagesListStatusFilter';
@@ -17,7 +17,6 @@ import {
   usePerPageSelect,
   useSetPage,
   useSortColumn,
-  useDeepCompareEffect,
 } from '../../Utilities/hooks';
 import { intl } from '../../Utilities/IntlProvider';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
@@ -39,15 +38,15 @@ const Packages = () => {
   const metadata = useSelector(({ PackagesListStore }) => PackagesListStore.metadata);
   const queryParams = useSelector(({ PackagesListStore }) => PackagesListStore.queryParams);
 
-  useDeepCompareEffect(() => {
+  useLayoutEffect(() => {
     if (firstMount) {
       apply(decodeQueryparams('?' + searchParams.toString()));
       setFirstMount(false);
     } else {
       setSearchParams(encodeURLParams(queryParams));
       dispatch(fetchPackagesAction(queryParams));
     }
-  }, [queryParams, firstMount]);
+  }, [JSON.stringify(queryParams), firstMount]);
 
   function apply(params) {
     dispatch(changePackagesListParams(params));