Manejo de estado de carga con el archivo loading.tsx

Hay otra forma de aplicar el loading sin tener que pasar los componentes que son estaticos al layout. . Personalmente no me gusta tanto la idea de pasar esos componentes al layout porque el layout deberia usarse para un diseño transversal entre diferentes paginas, es decir, deberian ir en el layout componentes que requieren varias paginas. . Esa es mi opinion, es correcto también hacerlo como en el curso. Pero ya he usado un poco de next y les voy a mostrar otra forma de hacerlo que a mi criterio es más optima. (Es probable que más adelante en el curso enseñen esta otra forma) . La cosa es la siguiente: El loading file va a ser el skeleton de la pagina entera. Pero dentro de la pagina es probable que no todos los componentes necesiten esperar a que la data llegue desde una api, sino que hay componentes estaticos que están disponibles desde el primer momento como un h1, h2, estilos, interfaz y basicamente todo lo que no sea traer datos de una api la base de datos. . Siguiendo al estrategia del archivo loading, esos componentes no se van a mostrar tampoco hasta que el componente que requiere traer datos asincronamente no esté listo. . Ese es un problema porque el usuario podria ir interactuando con los componentes estaticos mientras esperamos a que el componente que está haciendo algo asincronamente, esté listo. . Lo que podemos hacer es en lugar de usar el archivo loading, ser más precisos y solo mostrar un skeleton en aquellos componentes que requiren una operación asincrona. . Eso se hace envolviendo esos componentes dentro de un Reaact Suspense (es un componente de React) que recibe la prop "fallback". Dicho fallback es el skeleton que se mostrará mientras se espera a que la data esté lista. Pero los demás componentes que no estén envueltos dentro del \<Suspense> se mostrarán inmediatamente y el usuario puede interactuar con ellos. . Así quedaría: . . Este es un proyecto personal donde estoy usando next 14. Como puedes ver, el componente principal es la pagina home, dentro hay otros 3 componentes principales de los cuales dos estan envueltos en un suspense. . Y así es como se mostraría: . . La pagina se muestra inmediantamente con los componentes estaticos mientras los otros cargan

Sobre la solución, me pareció muy útil la propia documentación de nextjs para entender mejor:

Con pasar los componentes estáticos al layout.tsx, los mismos serán renderizados directamente y el loader aplicará únicamente al componente page.tsx (y sus hijos) que esté en ese mismo directorio/ruta.

para que no nos salga el error en el mapeo de productos podemos crear una interface con todos los tipos que tiene el objeto producto les facilito el codigo ```js interface Product { id: number; title: string; body_html: string; vendor: string; product_type: string; created_at: string; handle: string; updated_at: string; published_at: string; template_suffix: null | string; published_scope: string; tags: string; status: string; admin_graphql_api_id: string; variants: Array<{ /* Detalles de la variante */ }>; // Necesitarías definir el tipo para las variantes options: Array<{ /* Detalles de las opciones */ }>; // Necesitarías definir el tipo para las opciones images: Array<{ /* Detalles de las imágenes */ }>; // Necesitarías definir el tipo para las imágenes image: { id: number; alt: null | string; position: number; product_id: number; created_at: string; updated_at: string; admin_graphql_api_id: string; width: number; height: number; src: string; variant_ids: number[]; }; } ``` dentro de images, options y variant tenemos tambien otras interfaces y aplicando este params el codigo quedaria asi ```ts const getProducts = async (): Promise<Product[]> => { // ... (código de getProducts) }; export const MainProduct: React.FC = () => { const [products, setProducts] = useState<Product[]>([]); useEffect(() => { const fetchProducts = async () => { const productsData = await getProducts(); setProducts(productsData); }; fetchProducts(); }, []); // El segundo argumento [] asegura que useEffect solo se ejecute una vez al montar el componente return ( <section className={styles.MainProducts}>

✨ New products released!

</section> ); }; ```

No me gusto el curso, este debiera enfocarse en Next.js y no en implementar y resolver los problemas de Shopify con este framework. Evidentemente hay una falla metodologica. Ni siquiera es util para quienes quieran implementar Shopify con Next. Es decir, no ayuda ni para Next.js ni para Shopify. Hay cursos en platzi que se crean una API para proveer datos, manteniendo simplicidad en los contenidos. Aca se complico mas de lo necesario es desmedro de la calidad del curso. . El instructor tiene experiencia profesional, que no se ve reflejado en el curso por falta de prolijidad.

yo estoy tomando este curso como base y estoy utilizando la documentación de Nextjs y la api de Platzi, jajajjaja

No entendi nada

```````tsx "use client"; import Image from "next/image"; import { useEffect, useState } from "react"; export interface Products { id: number; title: string; price: number; description: string; images: string[]; creationAt: Date; updatedAt: Date; category: Category; } export interface Category { id: number; name: string; image: string; creationAt: Date; updatedAt: Date; } const getProducts = async (): Promise<Products[]> => { const response = await fetch("https://api.escuelajs.co/api/v1/products"); const data = await response.json(); return data; }; export function MainProdruts() { // const products = await getProducts(); // console.log(products); const [products, setProducts] = useState<Products[]>([]); useEffect(() => { const fetchProducts = async () => { const data = await getProducts(); setProducts(data); }; fetchProducts(); }, []); console.log(products); return ( <section>

✨ New products released!

</section> ); } ``````js ```````

sa```js aa ```

```js // Generated by https://quicktype.io export interface GetProductsResponse { products: Product[]; } export interface Product { id: number; title: string; body_html: string; vendor: Vendor; product_type: string; created_at: string; handle: string; updated_at: string; published_at: string; template_suffix: null; published_scope: PublishedScope; tags: string; status: Status; admin_graphql_api_id: string; variants: Variant[]; options: Option[]; images: Image[]; image: Image; } export interface Image { id: number; alt: null; position: number; product_id: number; created_at: string; updated_at: string; admin_graphql_api_id: string; width: number; height: number; src: string; variant_ids: any[]; } export interface Option { id: number; product_id: number; name: Name; position: number; values: Option1[]; } export enum Name { Title = "Title", } export enum Option1 { DefaultTitle = "Default Title", } export enum PublishedScope { Global = "global", } export enum Status { Active = "active", } export interface Variant { id: number; product_id: number; title: Option1; price: string; sku: null; position: number; inventory_policy: InventoryPolicy; compare_at_price: null | string; fulfillment_service: FulfillmentService; inventory_management: null; option1: Option1; option2: null; option3: null; created_at: string; updated_at: string; taxable: boolean; barcode: null; grams: number; image_id: null; weight: number; weight_unit: WeightUnit; inventory_item_id: number; inventory_quantity: number; old_inventory_quantity: number; requires_shipping: boolean; admin_graphql_api_id: string; } export enum FulfillmentService { Manual = "manual", } export enum InventoryPolicy { Deny = "deny", } export enum WeightUnit { Kg = "kg", } export enum Vendor { FutureWorld = "Future World", } ```*// Generated by* [*https://quicktype.io*](https://quicktype.io) export interface GetProductsResponse {  products: Product\[];} export interface Product {  id:                   number;  title:                string;  body\_html:            string;  vendor:               Vendor;  product\_type:         string;  created\_at:           string;  handle:               string;  updated\_at:           string;  published\_at:         string;  template\_suffix:      null;  published\_scope:      PublishedScope;  tags:                 string;  status:               Status;  admin\_graphql\_api\_id: string;  variants:             Variant\[];  options:              Option\[];  images:               Image\[];  image:                Image;} export interface Image {  id:                   number;  alt:                  null;  position:             number;  product\_id:           number;  created\_at:           string;  updated\_at:           string;  admin\_graphql\_api\_id: string;  width:                number;  height:               number;  src:                  string;  variant\_ids:          any\[];} export interface Option {  id:         number;  product\_id: number;  name:       Name;  position:   number;  values:     Option1\[];} export enum Name {  Title = "Title",} export enum Option1 {  DefaultTitle = "Default Title",} export enum PublishedScope {  Global = "global",} export enum Status {  Active = "active",} export interface Variant {  id:                     number;  product\_id:             number;  title:                  Option1;  price:                  string;  sku:                    null;  position:               number;  inventory\_policy:       InventoryPolicy;  compare\_at\_price:       null | string;  fulfillment\_service:    FulfillmentService;  inventory\_management:   null;  option1:                Option1;  option2:                null;  option3:                null;  created\_at:             string;  updated\_at:             string;  taxable:                boolean;  barcode:                null;  grams:                  number;  image\_id:               null;  weight:                 number;  weight\_unit:            WeightUnit;  inventory\_item\_id:      number;  inventory\_quantity:     number;  old\_inventory\_quantity: number;  requires\_shipping:      boolean;  admin\_graphql\_api\_id:   string;} export enum FulfillmentService {  Manual = "manual",} export enum InventoryPolicy {  Deny = "deny",} export enum WeightUnit {  Kg = "kg",} export enum Vendor {  FutureWorld = "Future World",}

```js export const MainProducts = async () => { const products = await getProducts(); return( <section className={styles.MainProducts}>

✨ New products released!

</section> ) } ```export const MainProducts = async () => {  const products = await getProducts();  return(    \<section className={styles.MainProducts}>      \

✨ New products released!\

      \    \</section>  )}

El tipado de lo que arroja la API sería el siguiente: `// src/models/interface/products.ts` `export interface Product {` ` admin_graphql_api_id: string;` ` body_html: string;` ` created_at: Date;` ` handle: string;` ` id: number;` ` image: Image;` ` images: Image[];` ` options: Option[];` ` product_type: string;` ` published_at: Date;` ` published_scope: string;` ` status: string;` ` tags: string;` ` template_suffix: null;` ` title: string;` ` updated_at: Date;` ` variants: Variant[];` ` vendor: string;` `}` `export interface Image {` ` admin_graphql_api_id: string;` ` alt: null;` ` created_at: Date;` ` height: number;` ` id: number;` ` position: number;` ` product_id: number;` ` src: string;` ` updated_at: Date;` ` variant_ids: any[];` ` width: number;` `}` `export interface Option {` ` id: number;` ` name: string;` ` position: number;` ` product_id: number;` ` values: string[];` `}` `export interface Variant {` ` admin_graphql_api_id: string;` ` barcode: null;` ` compare_at_price: null | string;` ` created_at: Date;` ` fulfillment_service: string;` ` grams: number;` ` id: number;` ` image_id: null;` ` inventory_item_id: number;` ` inventory_management: null;` ` inventory_policy: string;` ` inventory_quantity: number;` ` old_inventory_quantity: number;` ` option1: string;` ` option2: null;` ` option3: null;` ` position: number;` ` price: string;` ` product_id: number;` ` requires_shipping: boolean;` ` sku: null;` ` taxable: boolean;` ` title: string;` ` updated_at: Date;` ` weight: number;` ` weight_unit: string;` `}`

O simplemente para no hacer todo eso (que a mi parecer seria lo correcto) podriamos poner a product de tipo any asi se va el error ```ts ```

Yo tipe completamente los elementos del producto usando RapidApi `export interface ProductsList {  products: Product[];}` `export interface Product {  admin_graphql_api_id: string;  body_html: string;  created_at: Date;  handle: string;  id: number;  image: Image;  images: Image[];  options: Option[];  product_type: string;  published_at: Date;  published_scope: PublishedScope;  status: Status;  tags: string;  template_suffix: null;  title: string;  updated_at: Date;  variants: Variant[];  vendor: Vendor;}` `export interface Image {  admin_graphql_api_id: string;  alt: null;  created_at: Date;  height: number;  id: number;  position: number;  product_id: number;  src: string;  updated_at: Date;  variant_ids: any[];  width: number;}` `export interface Option {  id: number;  name: Name;  position: number;  product_id: number;  values: Option1[];}` `export enum Name {  Title = "Title",}` `export enum Option1 {  DefaultTitle = "Default Title",}` `export enum PublishedScope {  Global = "global",}` `export enum Status {  Active = "active",}` `export interface Variant {  admin_graphql_api_id: string;  barcode: null;  compare_at_price: null | string;  created_at: Date;  fulfillment_service: FulfillmentService;  grams: number;  id: number;  image_id: null;  inventory_item_id: number;  inventory_management: null;  inventory_policy: InventoryPolicy;  inventory_quantity: number;  old_inventory_quantity: number;  option1: Option1;  option2: null;  option3: null;  position: number;  price: string;  product_id: number;  requires_shipping: boolean;  sku: null;  taxable: boolean;  title: Option1;  updated_at: Date;  weight: number;  weight_unit: WeightUnit;}` `export enum FulfillmentService {  Manual = "manual",}` `export enum InventoryPolicy {  Deny = "deny",}` `export enum WeightUnit {  Kg = "kg",}` `export enum Vendor {  FutureWorld = "Future World",}`