import React, { Suspense } from "react";
import PageLoadingFallback from "./PageLoadingFallback.jsx";

/** Lazy-loaded screen with a gentle fade-in when navigation changes. */
export function LazyPage({ pageKey, children }) {
  return (
    <Suspense key={pageKey} fallback={<PageLoadingFallback />}>
      <div className="page-content-enter">{children}</div>
    </Suspense>
  );
}

export default LazyPage;
