loading screen for dynamic imports

rollup.config.js

@@ -88,12 +88,10 @@ export default [
     ],
   },
   {
-    // 1) Zwei benannte Eingänge: "index" und "Profile"
     input: {
       index: path.resolve(__dirname, 'dist/types/src/index.d.ts'),
       Profile: path.resolve(__dirname, 'dist/types/src/Components/Profile/index.d.ts'),
     },
-    // 2) Gebt statt "file" ein Zielverzeichnis (dir) an, plus entryFileNames
     output: {
       dir: path.resolve(__dirname, 'dist'),
       format: 'es',

src/Components/Templates/LoadingMapOverlay.tsx

@@ -2,8 +2,10 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 export const LoadingMapOverlay = () => {
   return (
-    <MapOverlayPage>
-      <div className='tw:text-center tw:loading tw:loading-spinner'></div>
+    <MapOverlayPage backdrop className='tw:max-w-xs tw:h-64 tw:bg-transparent' card={false}>
+      <div className='tw:flex tw:justify-center tw:items-center tw:h-full'>
+        <div className='tw:loading tw:loading-spinner tw:loading-xl'></div>
+      </div>
     </MapOverlayPage>
   )
 }

src/Components/Templates/MapOverlayPage.tsx

@@ -45,7 +45,7 @@ export function MapOverlayPage({
       >
         <div
           ref={overlayRef}
-          className={`${card ? 'tw:card tw:card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
+          className={`${card ? 'tw:card tw:card-body tw:shadow-xl' : ''} tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
         >
           {children}
           <button