using loading.tsx but error Hydration failed because the initial UI does not match what was rendered on the server.

[aseph8083]

Summary

I used Internationalization, and I tried to use it based on the example in the project https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing
but when I use loading.tsx an error appears Hydration failed because the initial UI does not match what was rendered on the server.
how do I fix it?

if I only save the loading.tsx file in the [lang] folder, the loading does not appear
but if I save it outside the [lang] folder, the loading appears, but the error appears

loading.tsx

export default async function Loading() {
  return (
    <div className="container">
      <div className="spinner"></div>
    </div>
  );
}

"next": "14.2.3",
"react": "^18",
"react-dom": "^18",