"next": "13.4.5".
I want to use src/components/Loading.tsx with a call in app/project/page.tsx.
SWR is used for API communication.
I want to display only the Progress Header before Loading, and all components after Loading is finished. However, when I call the Loading component, I get the following error

error

./src/app/loading.tsx
Error: Failed to read source code from /src/app/loading.tsx

Caused by:
    No such file or directory (os error 2)

"use client";
import { ProgressHeader } from "@/components/ProgressHeader";
import React, { useEffect, useRef, useState } from "react";
import { Avatar, Box, Text } from "@chakra-ui/react";
import { Load } from "@/components/Feedback";

export const Project = async ({
  params,
}: {
  params: { slug: string };
}) => {
  const { project } = repositories;

  const { data: messages, isLoading: isLoadingMessages } =
    project.useFetch("1");

  const isLoading = isLoadingMessages 

  console.log(isLoading);

  return (
    <Box>
      <ProgressHeader id={3} />
      {isLoading ? (
        <Load height="calc(100vh - 60px)" />
      ) : (
        <Box
        >
        </Box>
      )}
    </Box>
  );
};

export default Project;