From e9a003081f320d9140851624c0f0b9aab67a16ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20S=C3=A1nchez-Gallego?= <gallegoj@uw.edu>
Date: Thu, 10 Oct 2024 20:15:22 +0000
Subject: [PATCH] Wrap Image component in Suspense

---
 app/file/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/file/page.tsx b/app/file/page.tsx
index 85b4085..5b1897e 100644
--- a/app/file/page.tsx
+++ b/app/file/page.tsx
@@ -7,7 +7,7 @@
 
 'use client';
 
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Image } from '@mantine/core';
 import getSystemFile from '@/src/actions/get-system-image';
@@ -50,7 +50,11 @@ export default function FilePath() {
   const path = params.get('path');
 
   if (type === 'image') {
-    return <ImageFile path={path} />;
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <ImageFile path={path} />;
+      </Suspense>
+    );
   }
 
   return null;