components/editor/main/response.tsx

import Highlight from "react-highlight";
import "node_modules/highlight.js/styles/atom-one-dark.css";
import { Loading } from "@/components/loading";
export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
  return (
    <div className="overflow-auto h-full relative">
      <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3">
        {JSON.stringify(res ?? {}, null, 2)}
      </Highlight>
      {loading && (
        <Loading>
          <p className="text-slate-400 text-lg mt-4">Processing...</p>
        </Loading>
      )}
    </div>
  );
};