fix: flash when flipping to/from previewing item (#2437)

* [2406] bug: flash when flipping to/from previewing item

* fix: hide addFilesInfo while files are loading

prevents flash when navigating to directory or closing file preview by checking filesIsFetching state before rendering addFilesInfo component

* fix: prevent flash when navigating in files view

- add path guard to prevent rendering stale directory content
  during navigation
- only re-sort content when new data arrives, not during
  fetch initialization
- merge duplicate useEffect in grid-file to eliminate race
  condition
- remove obsolete key from commonProps
- hide empty state message at root to avoid duplicate with
  addFilesInfo
- change empty state color to charcoal-muted for consistency
- make empty state messages non-selectable with noselect
- add isRoot to filesPathInfo TypeScript interface

* refactor: return null instead of empty div

replace empty <div/> returns with null for better React
practices - no unnecessary DOM nodes, better performance,
clearer intent

---------

Co-authored-by: Suchitra Swain <suchitraswain.2012gmail.com>
Co-authored-by: Marcin Rataj <lidel@lidel.org>

Author: SuchitraSwain

src/bundles/files/index.js

@@ -95,7 +95,7 @@ const createFilesBundle = () => {
             : null
           let pageContent = result || state.pageContent
           // Apply current sorting to the fetched content
-          if (pageContent && pageContent.type === 'directory' && pageContent.content) {
+          if (result && pageContent && pageContent.type === 'directory' && pageContent.content) {
             const originalContent = pageContent.originalContent || pageContent.content // Preserve original
             const sortedContent = getSortedContent({ ...pageContent, originalContent }, state.sorting, state.pins)
             pageContent = {

src/files/FilesPage.js

@@ -32,7 +32,7 @@ const FilesPage = ({
   doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doAddCarFile, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesCidProvide, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
-  files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, filesSorting, t
+  files, filesPathInfo, filesIsFetching, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, filesSorting, t
 }) => {
   const { doExploreUserProvidedPath } = useExplore()
   const contextMenuRef = useRef()
@@ -196,7 +196,12 @@ const FilesPage = ({
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     , [files?.content, files?.pins, selected])
 
-    if (!files || files.type === 'file') return (<div/>)
+    if (!files || files.type === 'file') return null
+
+    // Don't render stale content during navigation
+    if (files.path && filesPathInfo.path && files.path !== filesPathInfo.path) {
+      return null
+    }
 
     if (files.type === 'unknown') {
       const path = files.path
@@ -214,7 +219,6 @@ const FilesPage = ({
     }
 
     const commonProps = {
-      key: window.encodeURIComponent(files.path),
       updateSorting: doFilesUpdateSorting,
       files: files.content || [],
       pins: files.pins || [],
@@ -388,6 +392,7 @@ const FilesPage = ({
 
       <InfoBoxes isRoot={filesPathInfo.isMfs && filesPathInfo.isRoot}
         isCompanion={false}
+        isFetching={filesIsFetching}
         filesExist={!!(files && files.content && files.content.length)} />
 
       <Modals
@@ -424,13 +429,14 @@ const Preview = ({ files, onDownload, onClose }) => {
   if (files && files.type === 'file') {
     return (<FilePreview {...files} onDownload={onDownload} onClose={onClose} />)
   }
-  return (<div/>)
+  return null
 }
 
 export default connect(
   'selectIpfsProvider',
   'selectIpfsConnected',
   'selectFiles',
+  'selectFilesIsFetching',
   'selectRemotePins',
   'selectPendingPins',
   'selectFailedPins',

src/files/file-preview/file-thumbnail.tsx

@@ -18,25 +18,21 @@ interface FileThumbnailPropsConnected extends FileThumbnailProps {
 const FileThumbnail: FC<FileThumbnailPropsConnected> = ({ name, cid, availableGatewayUrl, textPreview, onLoad }) => {
   const [error, setError] = useState(false)
   const [imageLoaded, setImageLoaded] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
   const type = typeFromExt(name)
 
   const handleImageError = useCallback(() => {
     setError(true)
     setImageLoaded(false)
-    setIsLoading(false)
   }, [])
 
   const handleImageLoad = useCallback(() => {
     setImageLoaded(true)
-    setIsLoading(false)
     onLoad?.()
   }, [onLoad])
 
   useEffect(() => {
     setImageLoaded(false)
     setError(false)
-    setIsLoading(false)
   }, [cid, name])
 
   if (error || (!textPreview && !type.startsWith('image'))) {
@@ -46,7 +42,7 @@ const FileThumbnail: FC<FileThumbnailPropsConnected> = ({ name, cid, availableGa
   if (type === 'image') {
     const src = `${availableGatewayUrl}/ipfs/${cid}?filename=${encodeURIComponent(name)}`
     return (
-      <div className={`file-thumbnail ${!imageLoaded || isLoading ? 'is-loading' : ''}`}>
+      <div className={`file-thumbnail ${!imageLoaded ? 'is-loading' : ''}`}>
         <div className="file-thumbnail-loading" />
         <img
           className="w-100 h-100 object-contain br2"
@@ -63,7 +59,7 @@ const FileThumbnail: FC<FileThumbnailPropsConnected> = ({ name, cid, availableGa
 
   if (textPreview) {
     return (
-      <div className={`file-thumbnail file-thumbnail-text ${(isLoading || textPreview.length === 0) ? 'is-loading' : ''}`}>
+      <div className={`file-thumbnail file-thumbnail-text ${textPreview.length === 0 ? 'is-loading' : ''}`}>
         <div className="file-thumbnail-loading" />
         <pre className="file-thumbnail-content">
           {textPreview}

src/files/files-grid/files-grid.tsx

@@ -21,7 +21,7 @@ export interface FilesGridProps {
 type SetPinningProps = { cid: CID, pinned: boolean }
 
 interface FilesGridPropsConnected extends FilesGridProps {
-  filesPathInfo: { isMfs: boolean }
+  filesPathInfo: { isMfs: boolean, isRoot: boolean }
   t: TFunction
   onRemove: (files: ContextMenuFile[]) => void
   onRename: (files: ContextMenuFile[]) => void
@@ -192,9 +192,9 @@ const FilesGrid = ({
           onSelect={handleSelect}
         />
       ))}
-      {files.length === 0 && (
+      {files.length === 0 && !filesPathInfo?.isRoot && (
         <Trans i18nKey='filesList.noFiles' t={t}>
-          <div className='pv3 b--light-gray files-grid-empty bt tc gray f6'>
+          <div className='pv3 b--light-gray files-grid-empty bt tc charcoal-muted f6 noselect'>
             There are no available files. Add some!
           </div>
         </Trans>

src/files/files-grid/grid-file.css

@@ -158,6 +158,19 @@
   z-index: 0;
 }
 
+.grid-file-icon-fallback {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  z-index: 0;
+}
+
 .grid-file-dots {
   position: absolute;
   top: 8px;

src/files/files-grid/grid-file.tsx

@@ -105,6 +105,9 @@ const GridFile: FC<GridFilePropsConnected> = ({
   const [textPreview, setTextPreview] = useState<string | null>(null)
 
   useEffect(() => {
+    setHasPreview(false)
+    setTextPreview(null)
+
     const fetchTextPreview = async () => {
       const isTextFile = type.startsWith('text/') ||
                         type === 'txt' ||
@@ -218,7 +221,11 @@ const GridFile: FC<GridFilePropsConnected> = ({
             textPreview={textPreview}
             onLoad={() => setHasPreview(true)}
           />
-          {!hasPreview && <FileIcon style={{ width: 80 }} name={name} type={type} />}
+          {!hasPreview && (
+            <div className="grid-file-icon-fallback">
+              <FileIcon style={{ width: 80 }} name={name} type={type} />
+            </div>
+          )}
           <button
             ref={dotsWrapper}
             className="grid-file-dots"

src/files/files-list/FilesList.js

@@ -235,13 +235,19 @@ export const FilesList = ({
     listRef.current?.forceUpdateGrid?.()
   }
 
-  const emptyRowsRenderer = () => (
-    <Trans i18nKey='filesList.noFiles' t={t}>
-      <div className='pv3 b--light-gray bt tc gray f6'>
-            There are no available files. Add some!
-      </div>
-    </Trans>
-  )
+  const emptyRowsRenderer = () => {
+    if (filesPathInfo.isRoot) {
+      // Root has special more prominent message (AddFilesInfo)
+      return null
+    }
+    return (
+      <Trans i18nKey='filesList.noFiles' t={t}>
+        <div className='pv3 b--light-gray bt tc charcoal-muted f6 noselect'>
+              There are no available files. Add some!
+        </div>
+      </Trans>
+    )
+  }
 
   const rowRenderer = ({ index, key, style }) => {
     const pinsString = pins.map(p => p.toString())

src/files/info-boxes/InfoBoxes.js

@@ -3,16 +3,17 @@ import PropTypes from 'prop-types'
 import CompanionInfo from './companion-info/CompanionInfo.js'
 import AddFilesInfo from './add-files-info/AddFilesInfo.js'
 
-const InfoBoxes = ({ isRoot, isCompanion, filesExist }) => (
+const InfoBoxes = ({ isRoot, isCompanion, isFetching, filesExist }) => (
   <div>
     { isRoot && isCompanion && <CompanionInfo /> }
-    { isRoot && !filesExist && !isCompanion && <AddFilesInfo /> }
+    { isRoot && !filesExist && !isCompanion && !isFetching && <AddFilesInfo /> }
   </div>
 )
 
 InfoBoxes.propTypes = {
   isRoot: PropTypes.bool.isRequired,
   isCompanion: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
   filesExist: PropTypes.bool.isRequired
 }
 

src/files/info-boxes/add-files-info/AddFilesInfo.js

@@ -6,7 +6,7 @@ const AddFilesInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >
     <Box style={{ background: 'rgba(105, 196, 205, 0.1)' }}>
       <Trans i18nKey='addFilesInfo' t={t}>
-        <p className='ma0'>No files here yet! Add files to your local IPFS node by clicking the <strong>Import</strong> button above.</p>
+        <p className='ma0 noselect'>No files here yet! Add files to your local IPFS node by clicking the <strong>Import</strong> button above.</p>
       </Trans>
     </Box>
   </div>