React-native-render-html: How to deal with the long rendering time when the HTML string is very long

[junchenjun]

Is this a bug report or a feature request?

feature request

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Hi, I am working on a RSS reader app using this lib, and I noticed when the HTML string gets very long (which happens a lot in case of the RSS article ) it usually takes a very long time to render the next page (the article detail page, where I am using react-native-render-html to render), and I will be stuck on the current page for quite a long time.

And I want to show a loading indicator before the detail page is finished rendering, but I don't know how to do that, because there is no way to detect when the rendering is finished.

I wonder if there is a method I can use to detect when the rendering is finished, so I can give it a loading before everything is rendered? Or someone can give me any advices of how to do this.

Thanks a lot.

[arunshejul]

Any solution ?

[junchenjun]

@arunshejul

I am parsing the HTML string in a separate component now, and set a setTimeout() inside the componentWillMount to delay the rendering for a very short time, this doesn't fix the problem, but it does provide a much better user experience.

[jm90m]

My app is able to parse the HTML String and display the rendered results in the component, but then it completely crashes if its long. Doesn't crash on newer devices like iPhone X, but anything older, it crashes.

Going to try and see what I can do, been stuck on this for a while.

[Exilz]

@jm90m how long exactly is your HTML string ? Could you share it with us so we can investigate more ? Maybe we should split up those really long strings and render the whole thing piece by piece. That would free up the memory once the previous rendering is done, hence preventing OOM crashes.

[jm90m]

@Exilz Thanks for the reply, here it is -

<p><a href="https://github.com/ianpark/steempay" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay</a></p>
<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmTWpnAmdpRGcut3RqxfTRV9bp5T6gp6joxKGGJhGqNuUK/steempay%20dooreee-01.jpg" /></p>
<h1>New Steem Pay is release with powerful features for offline commerce.</h1>
<blockquote>
<p>Steem Pay will create the first REAL ECONOMY on Steem blockchain!</p>
</blockquote>
<p>I am excited to announce that a new Steem Pay is released with powerful features for offline commerce. This version introduces following features:</p>
<ul>
<li>Sign-up / Login</li>
<li>Creating a &quot;Store&quot;</li>
<li>Presetting items</li>
<li>Selling items via &quot;Store&quot;</li>
</ul>
<h1>Steem Pay is now supporting 8 more currencies</h1>
<ul>
<li>AUD, Australian Dollar</li>
<li>NZD, New Zealand Dollar</li>
<li>THB, Thai Baht</li>
<li>INR, Indian Rupee</li>
<li>IDR, Indonesian Rupiah</li>
<li>VND, Vietnam Dong</li>
<li>PLN, Polish Zloty</li>
<li>CAD, Canadian Dollar</li>
</ul>
<h1>New to Steem Pay?</h1>
<p>Steem Pay is a Web app that simplifies selling and buying process between Steemians.<br />
Please read the previous posting first.<br />
<a href="https://steemit.com/utopian-io/@asbear/steempay-0-3-0-release-supporting-seven-more-currencies-usd-eur-gbp-jpy-cny-php-myr" target="_blank" rel="nofollow noopener">https://steemit.com/utopian-io/@asbear/steempay-0-3-0-release-supporting-seven-more-currencies-usd-eur-gbp-jpy-cny-php-myr</a></p>
<h1>Sellers and buyers, share your experience using SteemPay</h1>
<p>Post with proving photos with <a href="/**=-=-=**/--bsteemTAG--/**=-=-=/steempay"> #steempay</a> tag, then I will upvote the good ones.</p>
<h1>Our next goals are:</h1>
<ul>
<li>Branding, printable materials, design improvement</li>
<li>Launching Steem Pay APIs for online commerce</li>
<li>Introducing commission model with SMT integration</li>
<li>Investments and promotions</li>
</ul>
<h1>Information</h1>
<p>Official Website:<br />
<a href="https://steempay.co" target="_blank" rel="nofollow noopener">https://steempay.co</a><br />
Official Steemit account:<br />
<a href="/**=-=-=**/--bsteemUSER--/**=-=-=/steempayco">@steempayco</a></p>
<h1>Screenshots</h1>
<h3>Sign-up &amp; Login</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmcWwX4uUxSc3JXUzFtjsPMSzMrz2da7TWQzbcAG2htxJn/image.png" /><br />
<img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmVV7kUnBH2G5Y7uuv5tNXZW1Q2kKssNfYTJhwdg22k8a9/image.png" /></p>
<h3>New Setting Layout</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmaa2Ec9pbu12cnjaSYuP1CZY4sZaWkqo7xN2GBr7VJ9YX/image.png" /></p>
<h3>Adding accounts</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmUmhM7vv3iwRfWAAFgDrRiwK7RjBsKmcqR45K9EP1Jkgw/add_user.gif" alt="add_user.gif" /></p>
<h3>Creating a Store</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmYCJ5APdmj71x25x3BkZtwKK5FmUE9RdayFsN88KXyxDh/create_store.gif" alt="create_store.gif" /></p>
<h3>Presetting items</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmZjpBnzJCHYPmrtJnbmSMHNS8HjfF4cAp8QxMwgTibJdw/create_item.gif" alt="create_item.gif" /></p>
<h3>Selling the preset items via Store</h3>
<p><img src="https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmdq3P75Mzf8qXxViUSaCUYFBUkeH7xGDU6WmgGLhjuCHE/sell_item.gif" alt="sell_item.gif" /></p>
<h1>Design team onboard!</h1>
<p>Another great news is, we have a design team onboard!  The team is now working on branding. <a href="/**=-=-=**/--bsteemUSER--/**=-=-=/dayoung">@dayoung</a> is the lead designer.<br />
<img src="https://steemitimages.com/0x0/https://steemitimages.com/400x0/https://i.imgur.com/7KxM7Wd.jpg?1" /><br />
<img src="https://steemitimages.com/0x0/https://steemitimages.com/400x0/https://i.imgur.com/Qoe6eqw.jpg?1" /></p>
<h1>Commits</h1>
<p>Authentication &amp; Login<br />
<a href="https://github.com/ianpark/steempay/commit/a1f2d554955475ec8fe590496afae7c7ae650536" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay/commit/a1f2d554955475ec8fe590496afae7c7ae650536</a></p>
<p>Apply AWS suits with awsmobile<br />
<a href="https://github.com/ianpark/steempay/commit/ae93c2a582a00734259e6b8278a0bed4ba2147a9" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay/commit/ae93c2a582a00734259e6b8278a0bed4ba2147a9</a></p>
<p>Add AWS Cognito authenticator for pages<br />
<a href="https://github.com/ianpark/steempay/commit/134cabf3b5e2cf3da33854a3c48143b1d390d248" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay/commit/134cabf3b5e2cf3da33854a3c48143b1d390d248</a></p>
<p>Implement store setting<br />
<a href="https://github.com/ianpark/steempay/commit/414858f8ba909626656da731f667fc2d4a96b7cf" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay/commit/414858f8ba909626656da731f667fc2d4a96b7cf</a></p>
<p>Update Invoice Lambda functions<br />
<a href="https://github.com/ianpark/steempay/commit/9f800764b16833dc2e90bf12204f045bd365ee53" target="_blank" rel="nofollow noopener">https://github.com/ianpark/steempay/commit/9f800764b16833dc2e90bf12204f045bd365ee53</a></p>
<h1>Witness Vote</h1>
<p>If you like my Steem Pay project, please consider voting me as a witness so that I can continuously get motivated. :)</p>
<p><a href="https://steemit.com/~witness" target="_blank" rel="nofollow noopener">https://steemit.com/~witness</a></p>
<p><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=asbear&amp;approve=1" target="_blank" rel="nofollow noopener">https://v2.steemconnect.com/sign/account-witness-vote?witness=asbear&amp;approve=1</a></p>

I'm thinking it might be so many images that might be crashing it on different devices

[Exilz]

@jm90m it's weird. That's... really not that long actually. I recently developed a newspaper application in which articles are being displayed inside a swiper, by batch of 10. These articles have quite a lot of custom components and specific styles.

Anyway, the biggest market share of the app consists of low-end androids and we're not facing this problem...

Could you share how you're rendering this snippet ? It might have something to do with your additional props.

[jm90m]

@Exilz thanks again for the reply

here is how I use it

      <HTML
        html={parsedHtmlBody}
        imagesMaxWidth={deviceWidth - widthOffset}
        onLinkPress={handlePostLinkPress}
        staticContentMaxWidth={deviceWidth - widthOffset}
        baseFontStyle={{
          color: tinycolor(customTheme.primaryBackgroundColor).isDark()
            ? COLORS.LIGHT_TEXT_COLOR
            : COLORS.DARK_TEXT_COLOR,
          fontFamily: FONTS.PRIMARY,
        }}
        textSelectable
      />

[magicmiles]

Same problem here > https://tangotopics.com/ pick a post or the main post. It doesn't matter which one it is. Every single one of my posts makes my app crash when I go to parse it with the lib! :-(

[hungdev]

use this lib: https://github.com/huang47/nodejs-html-truncate

[Exilz]

I can't reproduce this issue... I tried to stress the plugin with an HUUGE HTML string, but I can't get it to crash or something.

Here's the HTML I'm rendering :
https://pastebin.com/Eq8PeQm5

It's perfectly smooth on both iOS and Android.

[arnotixe]

I rewrote to split HTML into chunks containing no more than one image each, and put the chunks into a Flatlist. It improved performance like 100 times. But auto-chunking HTML can be not-so-predictable... (In my case, watching device memory it became clear that loading lots of images in the HTMLview was the offender)

[nguyenduy2392]

I rewrote to split HTML into chunks containing no more than one image each, and put the chunks into a Flatlist. It improved performance like 100 times. But auto-chunking HTML can be not-so-predictable... (In my case, watching device memory it became clear that loading lots of images in the HTMLview was the offender)

are you have sample html ?

[arnotixe]

well, I wrote a function that rewrites

<img src="img.jpg">yada yada
<img src="img.jpg">yada yada
<img src="img.jpg">yada yada
<img src="img.jpg">yada yada
<img src="img.jpg">yada yada

into Flatlist Items:

fixedContent = array [
content: "  <View>
    <HTML html={  <img src="img.jpg">yada yada   }  />
  </View>",
content: " <View>
    <HTML html={  <img src="img.jpg">yada yada   }  />
  </View>"
…]
and then rendering it with:

        <FlatList
          data={fixedContent}
          renderItem={({ item }) => item.content}
        />

I wrote the chunker so that every piece of fixedContent would only ever contain 1 image, no more. Can't really remember if FlatList takes an object or array, but I hope you get the idea

[dzpt]

Anyone implement lazyload for component? Since it takes too long to render html string.
I need to notice user that the view is rendering.

I'm using Suspense + lazy:
const HtmlRender = lazy(props => import('./html.js'))

But it only works for first time, after the component is imported, it's no longer lazy and continue to block main ui thread and forces user to wait.