Fix flash loading response viewer

This commit is contained in:
Gregory Schier
2024-06-17 11:43:45 -07:00
parent ee776143b2
commit 5b2162e48d
5 changed files with 20 additions and 13 deletions

View File

@@ -13,8 +13,8 @@ export function CsvViewer({ response, className }: Props) {
const body = useResponseBodyText(response);
const parsed = useMemo(() => {
if (body === null) return null;
return Papa.parse<string[]>(body);
if (body.data == null) return null;
return Papa.parse<string[]>(body.data);
}, [body]);
if (parsed === null) return null;

View File

@@ -9,12 +9,15 @@ interface Props {
}
export function JsonViewer({ response, className }: Props) {
const rawBody = useResponseBodyText(response) ?? '';
const rawBody = useResponseBodyText(response);
if (rawBody.isLoading || rawBody.data == null) return null;
let parsed = {};
try {
parsed = JSON.parse(rawBody);
parsed = JSON.parse(rawBody.data);
} catch (e) {
// foo
// Nothing yet
}
return (

View File

@@ -37,7 +37,7 @@ export function TextViewer({ response, pretty, className }: Props) {
);
const contentType = useContentTypeFromHeaders(response.headers);
const rawBody = useResponseBodyText(response) ?? null;
const rawBody = useResponseBodyText(response);
const isSearching = filterText != null;
const filteredResponse = useFilterResponse({
@@ -99,7 +99,11 @@ export function TextViewer({ response, pretty, className }: Props) {
return result;
}, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]);
if (rawBody == null) {
if (rawBody.isLoading) {
return null;
}
if (rawBody.data == null) {
return <BinaryViewer response={response} />;
}
@@ -109,10 +113,11 @@ export function TextViewer({ response, pretty, className }: Props) {
const formattedBody =
pretty && contentType?.includes('json')
? tryFormatJson(rawBody)
? tryFormatJson(rawBody.data)
: pretty && contentType?.includes('xml')
? tryFormatXml(rawBody)
: rawBody;
? tryFormatXml(rawBody.data)
: rawBody.data;
const body = isSearching && filterText?.length > 0 ? filteredResponse : formattedBody;
return (

View File

@@ -8,7 +8,7 @@ interface Props {
export function WebPageViewer({ response }: Props) {
const { url } = response;
const body = useResponseBodyText(response) ?? '';
const body = useResponseBodyText(response).data ?? '';
const contentForIframe: string | undefined = useMemo(() => {
if (body.includes('<head>')) {

View File

@@ -5,7 +5,6 @@ import { getResponseBodyText } from '../lib/responseBody';
export function useResponseBodyText(response: HttpResponse) {
return useQuery<string | null>({
queryKey: ['response-body-text', response?.updatedAt],
initialData: null,
queryFn: () => getResponseBodyText(response),
}).data;
});
}