Projects don't appear when you have too many of them

[Diarmid Mackenzie]

Hi - I love the theme, and it's been really easy to use. Thank you so much for this!

I only hit one serious issue. After adding 6 or more projects, I found that when viewed on desktop, none of my projects was shown. If I reduce the projects to 5, the problem goes away.

The issue looks to be with the way that the useOnScreen hook is used by the Animation component:

useOnScreen has a default threshold of 0.25, which means that 25% of an element must be on screen before useOnScreen indicates that it is on screen.

Animation checks whether an element is on screen, using the default threshold, and hides it (opacity: 0) if it's not on screen.

All the projects are rendered within a single Animation component.

So the problem arises when the total length of the projects div exceeds 4x the screen height.

At this point it becomes impossible for 25% of the projects div to be on screen at once, so it's never considered 'on screen', and always rendered with opacity : 0

I have made a local fix & patch by reducing the default threshold for useOnScreen to 0.01 (1%). That's working fine for me now, but I'm not sure it's the best fix...

• You might want to make the "onScreen" threshold adjust dynamically depending on the number of projects?
• Or you might want to switch things around in ProjectsSection so that there is an Animation component per-project, rather than having one that spans all the projects?

Either way, I hope this bug report & analysis is useful.

Please don't rush to fix on my account, as I'm happy with may patched version for now. But this may be a helpful bug to fix before others hit it. 6 projects doesn't seem like that many to me.

[Konstantin Münster]

Hi there! Thanks a lot for opening the issue and your A+ analysis 💪😁 I try to fix it soonish! I think your second proposed option sounds best for me.

[Prakyath Kantharaju]

Hello, Great theme, and thank you for making it open source.

I have the same issue, I am not able to solve the issue.

I hosting the website on netlify. link

Can you please suggest how to solve this issue ?

[Diarmid Mackenzie]

What I did as a workaround was:

Install patch-package:

npm i patch-package

Edit package.json as per set-up instructions here

 "scripts": {
    "postinstall": "patch-package"
 }

Modify this line in node_modules/gatsby-theme-portfolio-minimal/src/hooks/useOnScreen.tsx...

export function useOnScreen<T>(ref: MutableRefObject<T | undefined>, threshold = 0.25): boolean {

to read

export function useOnScreen<T>(ref: MutableRefObject<T | undefined>, threshold = 0.01): boolean {

run

npx patch-package gatsby-theme-portfolio-minimal

That's all from memory & I'm not able to retest right now, but hopefully that will work for you.

Another method that should also work, though I have not tested, is to take advantage of Gatsby Shadowing.

If you just copy node_modules/gatsby-theme-portfolio-minimal/src/hooks/useOnScreen.tsx to src/hooks/useOnScreen.tsx, and make the same edit (0.25 -> 0.01), things should hopefully work for you without the need to use patch-package.

[Gaël de Mondragon]

Thanks @diarmidmackenzie!

I just tested the shadowing technique. It also works but note that you have to copy the file to src/gatsby-theme-portfolio-minimal/hooks/useOnScreen.tsx. (Your path is missing the theme name.)

I also had to use gatsby clean to get it to work locally.

I tested with a threshold of 0.05 (5%) instead of the original 0.25 (25%) and I believe it is low enough to solve this issue (for up to 20 something projects, if my math is right) as well as #25 (for the vast majority of mobile devices) without negatively impacting the UX.

@konstantinmuenster Let me know if I fail to see other consequences of that change but if there are none I would suggest to simply adjust that threshold to fix both issues. Happy to make a PR if it helps.

If you want to quickly compare the UX with 3 different threshold values:
1% -> https://diarmid.online/
5% -> https://gaël.com/
25% -> https://gatsbystarterportfoliominimalt.gatsbyjs.io/

[Konstantin Münster]

Hey @diarmidmackenzie @demondragong @Prakyathkantharaju ! Thanks for working on this - I just released new version that uses a 5% threshold. I hope this fixes the issue 🤞

Potentially, we could optimize the animations by revealing individual projects gradually, instead of the entire projects section altogether. But that's something for the future 😉

[Gaël de Mondragon]

Thank you! So far the 5% threshold has been working for me :)

I'm not sure I understand your second paragraph. For me, projects show up one after the other. Ah maybe you're saying at the level of 1 individual project, content could show up gradually (image then title then description etc.)

[Konstantin Münster]

@demondragong Regarding the second issue: the Projects component has an outer wrapper <Animation /> that calculate the reveal of the section based on the entire section length:

        <Animation type="fadeIn">
            <Section anchor={props.sectionId} heading={props.heading}>
                <Slider additionalClasses={[classes.Projects]}>
                    {data.projects.map((project, key) => {
                        return project.visible ? <Project key={key} index={key} data={project} /> : null;
                    })}
                </Slider>
                {data.button !== undefined && data.button.visible !== false && (
                    <Animation className={classes.MoreProjects} type="fadeIn">
                        <Button
                            type={ButtonType.LINK}
                            externalLink={true}
                            url={data.button.url}
                            label={data.button.label}
                        />
                    </Animation>
                )}
            </Section>
        </Animation>

Would be better to remove that and animate the section heading as well as the individual projects