Change Details

This task is leftover from T238231. The main part that is not implemented is that the 'skeleton' of the filter bar, number of suggestions counter, and the article card should already be inside the SE module *onload*. Proposed design: {F31619753} https://app.zeplin.io/project/5bd0b069495b5d0a002e7eb6/screen/5dceca39ec737944ea2120d6 zpl://screen?pid=5bd0b069495b5d0a002e7eb6&sid=5dceca39ec737944ea2120d6 ... with CSS animation: https://codepen.io/reets/pen/wvBwGKE And as animated gif {F31619763} //open full screen to see animation// ====Notable aspects: #For both mobile and desktop, the filter and article card should not shift positions at any point. # For desktop, the height of the module should not change at any point. # Pager text will show as 1 of ... suggestions whilst the total number of tasks is being fetched # All elements of the article card will load as a 'skeleton' placeholder grey boxes - including the **article title** *(this was not leftover from T238231) # The task type, info icon, difficulty level tag, and task type short description text will be shown (fade in) after the initial skeleton article card is loaded (along with filter bar and pager text) # The suggested edits white footer section animates in (moving upwards into position) after all other content is loaded - this removes the joltiness with how this section shifts down currently when it is shown first.

This task is leftover from T238231. The main part that is not implemented is that the 'skeleton' of the filter bar, number of suggestions counter, and the article card should already be inside the SE module *onload*. Proposed design: {F31619753} https://app.zeplin.io/project/5bd0b069495b5d0a002e7eb6/screen/5dceca39ec737944ea2120d6 zpl://screen?pid=5bd0b069495b5d0a002e7eb6&sid=5dceca39ec737944ea2120d6 ... with CSS animation: https://codepen.io/reets/pen/wvBwGKE And as animated gif {F31619763} //open full screen to see animation// ====Notable aspects: # {icon check-square color=green} For both mobile and desktop, the filter and article card should not shift positions at any point. # {icon check-square color=green} For desktop, the height of the module should not change at any point. # {icon check-square color=green} Pager text will show as 1 of ... suggestions whilst the total number of tasks is being fetched # {icon exclamation-triangle color=green} All elements of the article card will load as a 'skeleton' placeholder grey boxes - including the **article title** *(this was not leftover from T238231) # {icon exclamation-triangle color=red} The task type, info icon, difficulty level tag, and task type short description text will be shown (fade in) after the initial skeleton article card is loaded (along with filter bar and pager text) # {icon exclamation-triangle color=red} The suggested edits white footer section animates in (moving upwards into position) after all other content is loaded - this removes the joltiness with how this section shifts down currently when it is shown first.

This task is leftover from T238231. The main part that is not implemented is that the 'skeleton' of the filter bar, number of suggestions counter, and the article card should already be inside the SE module *onload*. Proposed design: {F31619753} https://app.zeplin.io/project/5bd0b069495b5d0a002e7eb6/screen/5dceca39ec737944ea2120d6 zpl://screen?pid=5bd0b069495b5d0a002e7eb6&sid=5dceca39ec737944ea2120d6 ... with CSS animation: https://codepen.io/reets/pen/wvBwGKE And as animated gif {F31619763} //open full screen to see animation// ====Notable aspects: # {icon check-square color=green} For both mobile and desktop, the filter and article card should not shift positions at any point. # {icon check-square color=green} For desktop, the height of the module should not change at any point. # {icon check-square color=green} Pager text will show as 1 of ... suggestions whilst the total number of tasks is being fetched # {icon exclamation-triangle color=green} All elements of the article card will load as a 'skeleton' placeholder grey boxes - including the **article title** *(this was not leftover from T238231) # {icon exclamation-triangle color=red} The task type, info icon, difficulty level tag, and task type short description text will be shown (fade in) after the initial skeleton article card is loaded (along with filter bar and pager text) # {icon exclamation-triangle color=red} The suggested edits white footer section animates in (moving upwards into position) after all other content is loaded - this removes the joltiness with how this section shifts down currently when it is shown first.