Skeleton – Code

import { observer } from "mobx-react-lite";
import { useState, useEffect } from "react";

const MobXExample = () => observer(() => {
  const { isLoading, data } = useStore(); // Assuming you have a MobX store

  return (
    {
      isLoading ? (
        <Card flexGrow="1" flexDirection="column" gap="2">
          <Skeleton.Circle diameter="3rem" />
          <Skeleton.Text variant="headline" />
          <Skeleton.Text rows="3"/>
        </Card>
      ) : (
        <Card flexGrow="1" flexDirection="column" gap="2">
          <Avatar name={data.name} size="large" />
          <Text variant="headline" el="p" size="small">{data.name}</Text>
          <Text>{data.description}</Text>
        </Card>
      )
    }
  )
})