Masonry not displayed on page load

[aruljayaraj]

Hi,

I've integrated this masonry into my Ionic React project. On the page load, cards are not displayed. When I adjust the page screen size, it will appear. I don't know what the was issue.

When I check the DOM it was empty.

<div class="xmasonry" style="position: relative; height: 0px;"></div>

I love this feature after resize, by default it didn't load. 😞

[nikitaeverywhere]

Hello! Thank you for reporting it. I can't help you without a clear reproduction example from your side - please provide one.

Thanks!

[aruljayaraj]

Hi Nikita Savchenko,

Thanks for your prompt reply.

I tried Stackblitz, Unfortunately, they support (Ionic+Angular), in my case is Ionic+ReactJs.

I've attached the GIF image. You can download and open it in chrome or firefox browser.

![Masonry-Issue](https://user-images.githubusercontent.com/414208/97961123-b57de400-1dd8-11eb-9410-ff495d0ba048.g

[nikitaeverywhere]

Thanks for the demo! Can you share your minimal reproducible example in Stackblitz please?

[aruljayaraj]

Hi Nikita Savchenko,

Thanks for your reply.

I tried with Stackblitz ReactJs+TypeScript Example It seems good, I can't create a reproducible example with Ionic+ReactJS, because there is no option in Stackblitz.

Ionic + ReactJS is the problem.

[nikitaeverywhere]

Got it. I've never used Ionic so it would be nice if you could make any single-command-launchable repository (or anything else) for me to see what's broken in XMasonry.

[aruljayaraj]

Hi Nikita Savchenko,

I've created a sample output Link for your reference. You can see the results when you can adjust the browser size.

Here is my Code:

App.tsx:

import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import Home from './pages/Home';

const App: React.FC = () => {
  return (
    <IonApp>
      <Home />
    </IonApp>
  );
}

export default App;

Home.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { XMasonry, XBlock } from "react-xmasonry"; 
const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>

        <h1>Masonry Content goes here!</h1>
        <XMasonry>
            <XBlock>
                <div className="card">
                    <h1>Simple Card</h1>
                    <p>Any text!</p>
                </div>
            </XBlock>
            <XBlock width={ 2 }>
                <div className="card">
                    <h1>Wider card</h1>
                    <p>Any text!</p>
                </div>
            </XBlock>
            <XBlock>
                <div className="card">
                    <h1>Card 2</h1>
                    <p>Any text!</p>
                </div>
            </XBlock>
            <XBlock>
                <div className="card">
                    <h1>Card 3</h1>
                    <p>Any text!</p>
                </div>
            </XBlock>
        </XMasonry>
      </IonContent>
    </IonPage>
  );
};

export default Home;

[nikitaeverywhere]

Thank you!

Hmm. That's definitely something's off with XMasonry (perhaps a race condition somewhere), however, there might also be a quick fix in when you initialize your Ionic react app. Try to do the initialization on DOM content load or just "onLoad" on body.

Test it yourself: right click at aruljayaraj.vethaexports.com, select "Save As" => have a locally saved copy of the webpage. Open it locally and boom, it renders:

Frankly speaking, I see more and more people using XMasonry, while it's been quite a hard from the maintenance standpoint project because of its initial design (it was a long while ago, when even flexbox wasn't that common!). Thus, I am thinking more towards rewriting it from scratch in a new major version release. This will bring a ton of improvements (the current internals of this library are very much tricky), however, don't expect it to happen very soon (I'm ultra-busy).

P.S. If vethaexports.com is your property and you can accept an advice to not to win the "best website design award", do at least these 2 simple things:

• Remove custom scroll behavior from the page (you can keep the scrollbar itself but do not re-implement the scroll)
• Remove music on page load

Hope this helps :)

[aruljayaraj]

Hi Nikita Savchenko,

Thanks for the prompt reply. Yes, It works when I save it locally. I don't know what the problem when I use it with Ionic+ReatJs. So I'll close this as of now.

Thanks for the suggestion about that website.

[nikitaeverywhere]

Thanks! The problem is indeed somewhere in XMasonry as far as I could see. I were just referring that it's better to rewrite the library than do fixes of this type: the library already has a lot of edge cases where its behavior is a bit weird. Thanks for bringing it up!