web/plugins/Loading/page.jsx

import React, { useContext } from "react";

import AppContext from "@ctx/AppContext";
import gif from "@img/loading.gif";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";

const Loading = ({ rateId }) => {
  const CTX = useContext(AppContext);
  const loading = CTX.state.loading;
  const t = useTranslations("extra");
  const locale = useLocale();
  const isRTL = locale === "fa";

  return (
    <>
      <div
        className={`fixed w-full tr03 z-50 ${
          loading ? "bottom-5 " : "bottom-[-100px] "
        } `}
      >
        <div className="bg-secondary-950 w-fit  rounded-full px-1 py-2 flex rtl m-3 ">
          <p className="mb-0 text-primary-300 mx-2 blacj ">{t("loading")}</p>
          <div className="w-[30px] ml-3">
            <Image src={gif} alt="" className="" />
          </div>
        </div>
      </div>
    </>
  );
};
export default Loading;