I'm newbie in nextjs, I want to have a page that is a loading between all the pages. I've already have the Loading component and searched about it. It said that we should use in the layout jsx the Suspense with the Loading layout but it does not work. eg: if I use only the Loading, it loades infinitely and if I use it inside the Suspense nothing happens. Appreciate your help in advance 🙂
code:

'use client';

import React, { Suspense, useEffect } from 'react';
import { connect } from 'react-redux';
import { toast } from 'react-toastify';
import { useTranslations } from 'next-intl';
import { Spinner } from '@/components/utils/Loading';
import { useRouter } from '@/navigation';
import Loading from '../../loading';

function AdminLayout({
  children,
  user,
}) {
  const translation = useTranslations('Login.Messages');

  const router = useRouter();
  useEffect(() => {
    if (user && user.roles.lenght === 0 && user.roles.some((role) => role.Role.name === 'Médico')) {
      toast.error(translation('notAuthorized'));
      router.push('/');
    }
  }, [user, router, translation]);

  if (!user) {
    return <Spinner />;
  }
  // hasAcccess
  if (user.roles.some((role) => role.Role.name === 'Médico')) return null;

  return (
    <div className="container p-4">
      <Suspense fallback={<Loading />}>
        {children}
      </Suspense>
    </div>
  );
}

const mapStateToProps = (state) => ({
  user: state.login.user,
});

export default connect(mapStateToProps, null)(AdminLayout);