add loader and change icon for images in code browser (#2402)

Author: Simek

components/Package/CodeBrowser/CodeBrowserContent.tsx

@@ -1,4 +1,4 @@
-import { type SyntheticEvent, useState } from 'react';
+import { type SyntheticEvent, useEffect, useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { type Theme } from 'react-shiki';
 import useSWR from 'swr';
@@ -29,12 +29,16 @@ type Props = {
 };
 
 export default function CodeBrowserContent({ packageName, filePath, fileData }: Props) {
-  const fileExtension = filePath.split('.').at(-1) ?? 'text';
   const [rawPreview, setRawPreview] = useState(false);
   const [imageData, setImageData] = useState<
     SyntheticEvent<HTMLImageElement>['currentTarget'] | null
   >(null);
 
+  useEffect(() => {
+    setImageData(null);
+  }, [filePath]);
+
+  const fileExtension = filePath.split('.').at(-1) ?? 'text';
   const isTooBig = Boolean(fileData?.size && fileData.size > 1024 * 1024 * 4);
   const isPreviewDisabled = PREVIEW_DISABLED_FILES.includes(fileExtension) || isTooBig;
   const isImageFile = IMAGE_FILES.includes(fileExtension);
@@ -146,14 +150,18 @@ export default function CodeBrowserContent({ packageName, filePath, fileData }:
       </CodeBrowserContentHeader>
       <View style={tw`flex flex-1 items-center justify-center`}>
         {isImageFile && (
-          <img
-            src={`https://unpkg.com/${packageName}/${filePath}`}
-            alt=""
-            style={tw`max-h-full max-w-full`}
-            onLoad={(event: SyntheticEvent<HTMLImageElement>) => {
-              setImageData(event.currentTarget);
-            }}
-          />
+          <>
+            <img
+              key={filePath}
+              src={`https://unpkg.com/${packageName}/${filePath}`}
+              alt={filePath}
+              style={tw`max-h-full max-w-full`}
+              onLoad={(event: SyntheticEvent<HTMLImageElement>) => {
+                setImageData(event.currentTarget);
+              }}
+            />
+            {!imageData && <ThreeDotsLoader />}
+          </>
         )}
         {!isImageFile && isPreviewDisabled && (
           <View style={tw`flex flex-col items-center gap-1`}>

components/Package/CodeBrowser/CodeBrowserContentFooter.tsx

@@ -2,6 +2,7 @@ import { type PropsWithChildren, type ReactNode } from 'react';
 import { View } from 'react-native';
 import { type Style } from 'twrnc';
 
+import { useLayout } from '~/common/styleguide';
 import tw from '~/util/tailwind';
 
 type Props = PropsWithChildren<{
@@ -15,10 +16,12 @@ export default function CodeBrowserContentFooter({
   leftSlot = <View />,
   rightSlot = <View />,
 }: Props) {
+  const { isSmallScreen } = useLayout();
   return (
     <View
       style={[
         tw`relative flex min-h-[26px] flex-row items-center justify-between gap-3 border-t border-palette-gray2 bg-default px-3 pb-px dark:border-default`,
+        isSmallScreen && tw`border-b border-t-0`,
         style,
       ]}>
       {leftSlot}

components/Package/CodeBrowser/CodeBrowserFileRow.tsx

@@ -2,9 +2,15 @@ import { useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import { P } from '~/common/styleguide';
-import { FileIcon, FileMetadataIcon, FolderIcon, WarningBlockquote } from '~/components/Icons';
+import {
+  FileIcon,
+  FileMetadataIcon,
+  FolderIcon,
+  ImageFileIcon,
+  WarningBlockquote,
+} from '~/components/Icons';
 import Tooltip from '~/components/Tooltip';
-import { getFileWarning } from '~/util/codeBrowser';
+import { getFileWarning, IMAGE_FILES } from '~/util/codeBrowser';
 import tw from '~/util/tailwind';
 
 type Props = {
@@ -26,11 +32,19 @@ export default function CodeBrowserFileRow({
 }: Props) {
   const [isHovered, setIsHovered] = useState(false);
   const warning = isDirectory ? undefined : getFileWarning(label);
+  const fileExtension = label.split('.').at(-1) ?? 'text';
+  const isImageFile = IMAGE_FILES.includes(fileExtension);
 
-  const Icon = useMemo(
-    () => (isDirectory ? FolderIcon : isNested ? FileMetadataIcon : FileIcon),
-    [isDirectory, isNested]
-  );
+  const Icon = useMemo(() => {
+    if (isDirectory) {
+      return FolderIcon;
+    } else if (isNested) {
+      return FileMetadataIcon;
+    } else if (isImageFile) {
+      return ImageFileIcon;
+    }
+    return FileIcon;
+  }, [isDirectory, isNested, isImageFile]);
 
   const rowStyle = [
     tw`flex flex-row items-center gap-1.5 px-3 py-[3px] last:mb-20`,