renovatebot/app-support

Renovate Bot Package Diff website shows old spinning icon when loading results

Closed this issue ยท 15 comments

What Renovate type, platform and version are you using?

Hosted GitHub app, but problem is with Renovate Bot Package Diff website.

Describe the bug

GIVEN I have a Renovate pull request.
WHEN I click on the link in the change section of this pull request.
THEN a new browser tab opens, while the website is fetching the diff (loading state), I see a blue Renovate paintbrush on a yellow background, this icon is spinning.

This spinning icon on the Renovate Bot Package Diff website is using the old Renovate branding instead of the newer paintbrush icon.

Relevant debug logs

To Reproduce

Go to any Renovate pull request on GitHub, click on the link in the Change column.

Additional context

I couldn't find a repository for the Renovate Bot Package Diff website, so I'm opening the issue here.
If I should open this issue somewhere else, please tell me! ๐Ÿ˜„

This one is hosted in a private repo. Want to make a new gif though? :)

Yeah, I'll take a shot at making a new GIF for you. ๐Ÿ˜„

Hmm I'm stuck...

I was thinking: "How hard can it be to make a rotating GIF..."
Well it turns out it's trickier than I thought... ๐Ÿ˜ž

I've fought with Krita and GIMP to make a new GIF, so far with no success.

Do you maybe have a tip on the process you used to make the first GIF? ๐Ÿ˜„

Use a normal png and use css animation to rotate it. ๐Ÿ˜‰

That sounds way easier than trying to hard-code the animation into a GIF in just the right way. ๐Ÿ‘

It can really be any animated image anyway..

I think we should move this to https://github.com/renovatebot/app-support ๐Ÿค”

I found this guide on "How to continuously rotate an image using CSS": https://flaviocopes.com/rotate-image

The html is pretty simple right now:

  | <!doctype html>
  |  
  | <html lang="en">
  | <head>
  | <meta charset="utf-8">
  |  
  | <title>Renovate Bot Package Diff</title>
  |  
  | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@2.8.0/dist/diff2html.css">
  |  
  | </head>
  |  
  | <body>
  | <dif id="content"><img src="/images/loader.gif" /></div>
  | <script src="https://cdn.jsdelivr.net/npm/diff2html@2.8.0/dist/diff2html.min.js"></script>
  | <script src="js/diff.js"></script>
  | </body>
  | </html>

@rarkins You can see the rotating logo with CSS approach on my repository here: https://github.com/HonkingGoose/rotating_icon_renovate

I look forward to your feedback. ๐Ÿ˜„

clone it and open the html file in a browser?

Yup, clone the rotating_icon_renovate repo, and then open the HTML file in a browser.

Updated live! Thank you

@rarkins please do note that my repository was basically a copy/paste of the code from https://flaviocopes.com/rotate-image.
So I don't know how that affects licensing and giving of credit?

That level of code is not of concern, as it's not realistic to claim copyright on something so small.