Switching from JS animations to CSS animations for the pulsating blue loading line.

This commit is contained in:
Samuel Clay 2021-04-05 16:15:23 -04:00
parent 2537634d46
commit 2c9e92da2a
4 changed files with 9 additions and 29 deletions

View file

@ -1543,9 +1543,9 @@ def load_river_stories__redis(request):
new_stories.append(story)
stories = new_stories
# if page >= 1:
# if page > 1:
# import random
# time.sleep(random.randint(3, 6))
# time.sleep(random.randint(10, 16))
diff = time.time() - start
timediff = round(float(diff), 2)

View file

@ -2190,6 +2190,12 @@ hr {
background-image: no-repeat center center;
overflow: hidden;
clear: both;
animation: end-line-animation 1.7s ease infinite;
}
@keyframes end-line-animation {
0%{background-color:#E1EBFF}
38%{background-color:#5C89C9}
100%{background-color:#E1EBFF}
}
.NB-module-river .NB-end-line {
border-top: none;

View file

@ -330,17 +330,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({
var $endline = $.make('div', { className: "NB-end-line NB-short" });
$endline.css({'background': '#FFF'});
$feed_scroll.append($endline);
clearInterval(this.feed_stories_loading);
$endline.animate({'backgroundColor': '#E1EBFF'}, {'duration': 550, 'easing': 'easeInQuad'})
.animate({'backgroundColor': '#5C89C9'}, {'duration': 1550, 'easing': 'easeOutQuad'})
.animate({'backgroundColor': '#E1EBFF'}, 1050);
_.delay(_.bind(function() {
this.feed_stories_loading = setInterval(function() {
$endline.animate({'backgroundColor': '#5C89C9'}, {'duration': 650})
.animate({'backgroundColor': '#E1EBFF'}, 1050);
}, 1700);
}, this), (550+1550+1050) - 1700);
},
check_premium_river: function() {
@ -365,7 +354,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({
end_loading: function() {
var $endbar = NEWSBLUR.reader.$s.$feed_scroll.find('.NB-end-line');
$endbar.remove();
clearInterval(this.feed_stories_loading);
if (NEWSBLUR.assets.flags['no_more_stories']) {
this.show_no_more_stories();

View file

@ -165,7 +165,7 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
// = Actions =
// ===========
fill_out: function(options) {
fill_out: function (options) {
this.snap_back_scroll_position();
if (NEWSBLUR.assets.flags['no_more_stories'] ||
!NEWSBLUR.assets.stories.length ||
@ -200,19 +200,6 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
$endline.css({'background': '#FFF'});
this.$el.append($endline);
clearInterval(this.feed_stories_loading);
$endline.animate({'backgroundColor': '#E1EBFF'}, {'duration': 550, 'easing': 'easeInQuad'})
.animate({'backgroundColor': '#5C89C9'}, {'duration': 1550, 'easing': 'easeOutQuad'})
.animate({'backgroundColor': '#E1EBFF'}, 1050);
if (NEWSBLUR.assets.preference('animations')) {
_.delay(_.bind(function() {
this.feed_stories_loading = setInterval(function() {
$endline.animate({'backgroundColor': '#5C89C9'}, {'duration': 650})
.animate({'backgroundColor': '#E1EBFF'}, 1050);
}, 1700);
}, this), (550+1550+1050) - 1700);
}
if (options.scroll_to_loadbar) {
this.pre_load_page_scroll_position = $('#story_titles').scrollTop();
if (this.pre_load_page_scroll_position > 0) {
@ -254,7 +241,6 @@ NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
end_loading: function() {
var $endbar = this.$story_titles.find('.NB-end-line');
$endbar.remove();
clearInterval(this.feed_stories_loading);
if (NEWSBLUR.assets.flags['no_more_stories']) {
this.show_no_more_stories();