Component page flash
I've made a component that uses flexbox, though I wanted to make sure that the container fills based on the common factors of the number of elements (i.e. 6 boxes fill:
1 row, 6 columns or
2 rows, 3 columns or
3 rows, 2 columns or
6 rows 1 column).
The component works great and the design of the component is not for this post.
The issue is that the component flashes before it is loaded, causing a great difference that is noticeably different (on large screens). What is a recommended approach to removing the flash / changes, while still remaining a responsive component?
The page URL is here:
https://www.randomwebbits.com/pages/hyperlink.html
Hyperlink</RWB>
Hyperlinks connect web pages using URLs.
8 Replies
++My site has a stack to analyze for this component. All the frontend source code is made available to developer's tools.
The console's verbose messages for this particular component provides the source code location, called "boxList.ts"
I'm uncertain whether the event DOMContentLoaded is at fault, or if there's a way to program a solution.
++++The call stack initializes boxList as boxList.init() within an event listener 'DOMContentLoaded' the component is rendered.
i don't get why you are using js to define the amount of columns. why not do it with css and media queries (and why not grid?)
for example: https://codepen.io/MarkBoots/pen/bGZRExQ?editors=1100
I needed to calculate the number of columns that I want. Potentially, this box list can hold many more links, so, programatcally it makes more sense to me.
your answer does not help to provide a solution to the question I asked
well, you are calculating after page load, so that can cause the flickering. i you determine the layout before that, it won't
that's why I suggest the css approach
please see above comment for yours, mark.
how do you suggest to do that?
if you wait for a full page load and then calculate something using js, it'll always flash
if you insist using JS, the solution is to put a loading spinner over everything to hide your entire page, then do the math, reorder your columns, and remove the loading spinner
You can use CSS to determine the layout based on how many elements there are.
What, exactly, are the different possibilities though? You mentioned 1 row, 6 columns, 2 rows, 3 columns, etc. That's if there are 6, but it sounds like you also want to change that, depending on how many elements there are? Or am I misunderstanding?
That's awesome. MarkBoots had the right answer it appears. It seems a larger issue than currently understood.
Mark: this is a weird issue. I prefer JavaScript to run the component math, just due to the configuration of the app currently --> It's a static hosted website that's precompiled typescript from my developer environment. The source is available thanks to Gulp and some dev environment configuration; the result is JS files that are added in the page head:
Jochem: Your answer appears matches and helps with extended explanation
Kevin:
You're correct. I want the component to be aware of the element count. Even though the page is hard coded with 6 elements, if I were to add any (which isn't currently planned), i prefer the component to dynamically adjust.
---> I've refreshed the code today so that playing in dev tools SHOULD work on resizing.
If you duplicate one of the links to increase the count to 16, suddenly the component knows that it can have a column count of 4. With 6 current i only want to allow 1, 2, 3 or 6 columns. With this small example, it means excluding any 4 or 5 column widths. I feel it evens out the columns more, just for grins and programming practice.
example:
if 15 elements exist, 4 columns are not allowed because the nearest square (rounded down) is 9.
if 16 elements exist, the nearest square is rounded down is 4, allowing 4 column width.
This exercise has led to a change in source code. The boxList is now only allowing factors of the item count as the column counts.
I'll play with the CSS, but I'm still uncertain how about to keep it responsive and not flashing.