zaremate/file-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wrap FilePreviewContainerContent in Suspense for improved loading state handling

Browse Source
This commit is contained in:
ZareMate 2025-04-16 19:05:49 +02:00
parent e1097ba1be
commit 8bc35d979d
Signed by: zaremate
GPG Key ID: 369A0E45E03A81C3
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/share/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef, Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation"; import { useSearchParams, useRouter } from "next/navigation";
import toast, { Toaster } from "react-hot-toast"; import toast, { Toaster } from "react-hot-toast";
import { FilePreview } from "~/app/_components/FilePreview"; import { FilePreview } from "~/app/_components/FilePreview";
@ -20,7 +20,7 @@ interface FileDetails {
description: string; description: string;
} }
export default function FilePreviewContainer() { function FilePreviewContainerContent() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
const fileId = searchParams.get("id"); const fileId = searchParams.get("id");
@ -34,7 +34,7 @@ export default function FilePreviewContainer() {
setDescription, setDescription,
fileId || undefined fileId || undefined
); );
const getFileType = (extension: string): string => { const getFileType = (extension: string): string => {
const fileTypes: Record<string, string> = { const fileTypes: Record<string, string> = {
".mp4": "video/mp4", ".mp4": "video/mp4",
@ -49,7 +49,7 @@ export default function FilePreviewContainer() {
".wav": "audio/wav", ".wav": "audio/wav",
}; };
return fileTypes[extension] || "unknown"; return fileTypes[extension] || "unknown";
} };
useEffect(() => { useEffect(() => {
if (!fileId) { if (!fileId) {
@ -139,7 +139,6 @@ export default function FilePreviewContainer() {
</h1> </h1>
<div className="mt-6"> <div className="mt-6">
{fileDetails.type !== "unknown" && ( {fileDetails.type !== "unknown" && (
<FilePreview fileId={fileDetails.id} fileType={getFileType(fileDetails.type)} /> <FilePreview fileId={fileDetails.id} fileType={getFileType(fileDetails.type)} />
)} )}
</div> </div>
@ -252,3 +251,11 @@ export default function FilePreviewContainer() {
); );
} }
export default function FilePreviewContainer() {
return (
<Suspense fallback={<div>Loading...</div>}>
<FilePreviewContainerContent />
</Suspense>
);
}