✨ Improved update support for iframe widget, plus shows loader (#992)

src/components/Widgets/IframeWidget.vue

@@ -15,6 +15,9 @@ import WidgetMixin from '@/mixins/WidgetMixin';
 
 export default {
   mixins: [WidgetMixin],
+  data: () => ({
+    updateCount: 0,
+  }),
   computed: {
     /* Gets users specified URL to load into the iframe */
     frameUrl() {
@@ -23,7 +26,7 @@ export default {
         this.error('Iframe widget expects a URL');
         return null;
       }
-      return usersChoice;
+      return `${usersChoice}${this.updatePathParam}`;
     },
     frameHeight() {
       return this.options.frameHeight;
@@ -32,11 +35,16 @@ export default {
     frameId() {
       return `iframe-${btoa(this.frameUrl || 'empty').substring(0, 16)}`;
     },
+    /* Generate a URL param, to be updated in order to re-fetch image */
+    updatePathParam() {
+      return this.updateCount ? `#dashy-update-${this.updateCount}` : '';
+    },
   },
   methods: {
     /* Refreshes iframe contents, called by parent */
     update() {
       this.startLoading();
+      this.updateCount += 1;
       (document.getElementById(this.frameId) || {}).src = this.frameUrl;
       this.finishLoading();
     },

src/components/Widgets/ImageWidget.vue

@@ -32,10 +32,6 @@ export default {
           return userVal;
         }
       };
-      console.log(`
-        width: ${makeDimensionsUnit(this.options.imageWidth)};
-        height: ${makeDimensionsUnit(this.options.imageHeight)};
-      `);
       // Return CSS values for width and height
       return `
         width: ${makeDimensionsUnit(this.options.imageWidth)};
@@ -50,7 +46,9 @@ export default {
   methods: {
     /* In order to re-fetch the image, we much update the URL with an arbitrary hash */
     update() {
+      this.startLoading();
       this.updateCount += 1;
+      this.finishLoading();
     },
   },
 };