Question 353020 in Reactjs Question posted in
The new location for the React Documentation can be found here.

no loader is there if document rendering is in progress @cyntler/react-doc-viewer reactjs

I have list of documents to load and in react on click of row item i am showing doc viewer , i have urls from local server that are working fine if i am hitting it from browser like this

http://localhost:8085/api/enquiries/docs/preview?key=docs/ENQ_37/6gE6WoUL.jpg

On clicking of document previewer is not showing any loader but just the blank page, and randomly it shows files preview, sometimes work sometimes not

const handleDocClick = (doc) => {
    console.log("handleDocClick ~ doc:", doc);
    setSelecetdDoc(doc);
  };

<Grid container style={{ height: '800px' }}>
      <Grid item xs={12} md={4} style={{ height: "100%" }}>
        <DocList docs={docs} handleClick={handleDocClick} style={{ height: "100%" }} />
      </Grid>
      <Grid item xs={12} md={8} style={{ height: "100%" }}>
        <DocPreview doc={selectedDoc} />
      </Grid>
    </Grid >

and the DocPreview

export default function DocPreview({ doc }) {
  const [selectedDoc, setSelecetdDoc] = useState(doc);

  useEffect(() => {
    if (doc) {
      console.log("yes working")
      setSelecetdDoc(doc);
    }
  }, [doc])
  return (
    <DocViewer prefetchMethod="GET" style={{ borderRadius: "10px", height: "100%" }}
      documents={[{ fileType: selectedDoc?.fileType, fileName: selectedDoc?.name, uri: selectedDoc?.uri }]}
      pluginRenderers={DocViewerRenderers} />
  )
}

DocPreview.propTypes = {
  doc: PropTypes.shape({
    uri: PropTypes.string,
    fileType: PropTypes.string,
    fileName: PropTypes.string,
  })

Update1

In list i have 3 files 2 images and one is pdf. First time everything works fine, click on item this is not previewed yet will work fine.

Now if everything is clicked once and last was image loaded then and now i click on image item, no preview api call in network and no image preview will be loaded, now if i click on pdf item , network call will be there and pdf preview will work, and now click on any image item, network call will be there and image will be loaded, again click on other image item then no network call and image preview too will not be loaded.

how can i solve this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I passed all the docs

      <Grid item xs={12} md={8} style={{ height: "100%" }}>
        <DocPreview doc={selectedDoc} docs={docs.data?.map((doc) => { return { fileType: doc?.fileType, fileName: doc?.name, uri: doc?.uri } })} />
      </Grid>

    and in the doc preview used activeDocument prop

    export default function DocPreview({ doc, docs = [] }) {

  return (
    <DocViewer prefetchMethod="GET" style={{ borderRadius: "10px", height: "100%" }}
      documents={docs}
      activeDocument={{ fileType: doc?.fileType, fileName: doc?.name, uri: doc?.uri }}
      pluginRenderers={DocViewerRenderers}
    />
  )
}

  2. 0

    You can add a custom loader in the package documentation

    const MyLoadingRenderer = ({ document, fileName }) => {
  const fileText = fileName || document?.fileType || "";

  if (fileText) {
    return <div>Loading Renderer ({fileText})...</div>;
  }

  return <div>Loading Renderer...</div>;
};

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      // ...
    }
  }
  config={{
    loadingRenderer: {
      overrideComponent: MyLoadingRenderer,
    },
  }}
/>;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search