Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`Splash` component improvements

See original GitHub issue

This issue describes changes planned for the Splash component in order to make it more customizable.

Customizable logos

Currently, the Splash component’s logo is hard-coded Operational one, with the spinning animation relying on a state flag set every 8 seconds. This should be customizable for outside projects and other use-cases. The following steps are required to make this happen:

  • the rotation handling and state management should move from Splash.tsx to Splash.Logo.tsx. This will allow the spinning logo to be self-contained and swappable to a different one with its own animations.
  • Splash.tsx should take a logo?: React.ReactNode prop to allow for customizable logos. It should default to the current hard-coded one in case one isn’t provided.

Readable colors

Text colors in the Splash component are currently hard-coded to white, which won’t be readable if the background is set to a very bright color. As in the Button implementation in , this color should toggle between white and dark using the readableTextColor utility. This would involve tweaking animation colors, logo colors and backdrop colors.

Dev workflow

Simply clone the repo and run yarn install + yarn start to get the dev environment going. See React Styleguidist for help developing with styleguidist if you haven’t had the chance to work with it yet.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

adeelibrcommented, Sep 24, 2018

I haven’t yet seen the entire implementation for Splash, i’ll have a look at it when I get free from office today and come up with a approach that we can use for this, i’ll keep the above mentioned guidelines in mind when thinking for an approach for this. @peterszerzo

TejasQcommented, Sep 24, 2018

Looking forward to your PR, @adeelibr!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Splash Screen Improvements - Eclipsepedia
One solution is to provide a hand-crafted splash screen incorporating design elements from all vendors but this solution falls down when the set ......
Read more >
Use Custom Splash Screens
Specify custom splash screens for your mobile app adapted to all screen sizes and densities. - OutSystems 11 Documentation.
Read more >
Introduction — splash v3.4.0 documentation
splash is a utility for visualisation of output from (astrophysical) simulations using the Smoothed Particle Hydrodynamics (SPH) method in one, two and three ......
Read more >
How we added an animated Splash Screen to our React ...
First, we changed the native Splash Screen to just be an image with the same background color as the animation and we hid...
Read more >
What do you expect from a Project Reunion Splash Screen ...
Answers to these questions will help us understand your splash screen needs better, and may result in improvements to this specific developer experience....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found