Error Fixed

AmbrizAlberto · Apr 8, 2024 · f6938f8 · f6938f8
1 parent 67fb475
commit f6938f8
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 259 deletions.
diff --git a/app/components/LoadingScreen.js b/app/components/LoadingScreen.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Spinner from './spinner';
+
+const LoadingScreen = () => {
+  return (
+    <div className="loading-screen">
+      <h1>Cargando...</h1>
+      <Spinner/>
+    </div>
+  );
+};
+
+export default LoadingScreen;
diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* IMPORT PRINCIPAL LIBRARYS */
 import Link from 'next/link';
 

diff --git a/app/components/spinner.css b/app/components/spinner.css
@@ -0,0 +1,37 @@
+html {
+  background-color: #333;
+  display: flex; /* Usar flexbox */
+  justify-content: center; /* Centrar horizontalmente */
+  align-items: center; /* Centrar verticalmente */
+  height: 100vh; /* Hacer que el html ocupe toda la altura de la pantalla */
+  text-align: center;
+  color: orange;
+  transition: 500ms;
+}
+
+.spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px; /* Ajusta la altura según sea necesario */
+  transition: 500ms;
+}
+
+.spinner-circle {
+  width: 50px; /* Ajusta el tamaño del círculo según sea necesario */
+  height: 50px; /* Ajusta el tamaño del círculo según sea necesario */
+  border: 5px solid #ccc; /* Cambia el color y el estilo del borde según sea necesario */
+  border-radius: 50%; /* Hace que el borde sea redondeado para formar un círculo */
+  border-top-color: #333; /* Cambia el color del borde superior para dar la apariencia de movimiento */
+  animation: spin 1s infinite linear; /* Agrega una animación giratoria infinita */
+  transition: 500ms;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/components/spinner.jsx b/app/components/spinner.jsx
@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+import "./spinner.css"; // Corrige el nombre del archivo aquí
+
+const Spinner = () => {
+  return (
+    <div className="spinner">
+      {/* Agrega aquí la animación de carga */}
+      <div className="spinner-circle"></div>
+    </div>
+  );
+};
+
+export default Spinner;
diff --git a/app/css/main.css b/app/css/main.css
@@ -52,10 +52,10 @@ html{
     margin-bottom: 1%;
 }.photomia img {
     width: 40%;
+    height: 40%; /* Permite que la altura se ajuste automáticamente para mantener la proporción */
     margin-left: 35%;
     border-radius: 50%;
     max-width: 100%; /* Asegura que la imagen no supere el 100% del contenedor */
-    height: 40; /* Permite que la altura se ajuste automáticamente para mantener la proporción */
     cursor: pointer;
 }
 

diff --git a/app/layout.jsx b/app/layout.jsx
@@ -1,13 +1,41 @@
+// layout.jsx
+
+'use client'; // Marca el componente como un componente de cliente
+import React, { useState, useEffect } from 'react';
+import LoadingScreen from './components/LoadingScreen';
+
 export default function RootLayout({ children }) {
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Simulamos un tiempo de carga utilizando un temporizador
+      const timer = setTimeout(() => {
+        setLoading(false);
+      }, 2000);
+
+      // Limpieza del temporizador al desmontar el componente
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+
+  // Renderiza el contenido de la página solo si loading es falso
   return (
-    <html className="html">      
+    <html className="html">
+      <head>
+        {/* Aquí puedes agregar tus etiquetas <head> */}
+      </head>
       <body>
-
         <div className="main">
-          {children}
+          {loading ? ( // Si loading es verdadero, muestra el spinner de carga
+            <LoadingScreen />
+          ) : (
+            children // Si loading es falso, muestra el contenido de la página
+          )}
         </div>
-
       </body>
-  </html>
-  )
+    </html>
+  );
 }