External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: show loading spinner instead of error for HEIC preview, default fullscreen details to visible

Browse Source 
Replace static "Preview not available" and "Cannot preview this image
format" messages with a loading spinner in ImageViewer and SplitCanvas,
since HEIC files get server-side conversion and the preview appears
after a few seconds. Also default showDetails to true on /fullscreen.
This commit is contained in:
ashim-hq
2026-04-19 20:38:51 +08:00
parent 5c897f3c1d
commit fc98037eb1
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/common/image-viewer.tsx
+5 -6
View File
@@ -1,4 +1,4 @@
import { Maximize, Minimize2, ZoomIn, ZoomOut } from "lucide-react"; import { Loader2, Maximize, Minimize2, ZoomIn, ZoomOut } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { formatFileSize } from "@/lib/download"; import { formatFileSize } from "@/lib/download";
@@ -182,11 +182,10 @@ export function ImageViewer({
}} }}
> >
{loadError ? ( {loadError ? (
<div className="flex flex-col items-center gap-2 text-center"> <div className="flex flex-col items-center justify-center gap-3 text-center">
<p className="text-sm text-muted-foreground">Preview not available</p> <Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
<p className="text-xs text-muted-foreground/60"> <p className="text-sm text-muted-foreground">Loading preview...</p>
This format cannot be displayed in the browser <p className="text-xs text-muted-foreground/60">{filename}</p>
</p>
</div> </div>
) : bgPreview?.backgroundSrc || bgPreview?.containerBackground ? ( ) : bgPreview?.backgroundSrc || bgPreview?.containerBackground ? (
/* Layered bg-removal preview: background layer + subject layer */ /* Layered bg-removal preview: background layer + subject layer */
apps/web/src/components/tools/split-canvas.tsx
+4 -3
View File
@@ -88,9 +88,10 @@ export function SplitCanvas() {
if (loadError) { if (loadError) {
return ( return (
<div className="flex flex-col items-center justify-center h-full gap-2 text-center p-4"> <div className="flex flex-col items-center justify-center h-full gap-3 text-center p-4">
<p className="text-sm text-muted-foreground">Cannot preview this image format</p> <Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
<p className="text-xs text-muted-foreground">{filename}</p> <p className="text-sm text-muted-foreground">Loading preview...</p>
<p className="text-xs text-muted-foreground/60">{filename}</p>
</div> </div>
); );
} }
apps/web/src/pages/fullscreen-grid-page.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { useFeaturesStore } from "@/stores/features-store";
export function FullscreenGridPage() { export function FullscreenGridPage() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [showDetails, setShowDetails] = useState(false); const [showDetails, setShowDetails] = useState(true);
const navigate = useNavigate(); const navigate = useNavigate();
const [disabledTools, setDisabledTools] = useState<string[]>([]); const [disabledTools, setDisabledTools] = useState<string[]>([]);
const [experimentalEnabled, setExperimentalEnabled] = useState(false); const [experimentalEnabled, setExperimentalEnabled] = useState(false);