@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/start/guidelines/spinner.md

@@ -0,0 +1,710 @@
+# Loading guidelines
+
+*Category:* Getting started
+*Section:* Guidelines
+*Source:* https://uikit.developers.rio.cloud/#start/guidelines/spinner
+*Captured:* 2025-12-12T14:20:07.402Z
+
+There are various approaches when it comes to loading data and showing the user the different stages of the loading process.
+
+## Loading guidelines
+
+Here are some examples of using a Spinner to achieve a loading text and displaying loading results, either alone or in combination with other elements.
+
+**Loading state in buttons**
+
+Using spinner as part of a button. This is useful to show an ongoing operation without removing the current UI or closing a form dialog and to show errors when operation failed.
+
+**Loading state in buttons within tables**
+
+There are two ways to display a spinner inside a button when a long-running task is initiated. If the initial button doesn't have an icon, you can utilize the .btn-loading-overlay class to prevent the button size from changing. However, if the button already has an icon, you can substitute it with a spinner.
+
+It is not recommended to use a button as .btn-block or to set it to 100% width as this can result in excessively large buttons when the column size is not specified or is too wide.
+
+**Loading state in tables**
+
+Instead of showing a spinner floating underneath an empty table, put it in a row at least. Don't show a table header alone without a tbody.
+
+In some cases it is better to use placeholder for content to show the layout and some structure. Here you can use the ContentLoader to render the component without actual real values.
+
+### Example: Example 1
+
+Loading
+
+#### Summary
+
+Loading
+
+#### HTML (html)
+
+```html
+<div class="height-100">
+    <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+        <div class="spinner">
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+        </div>
+        <div class="spinnerText">Loading</div>
+    </div>
+</div>
+```
+
+### Example: No trucks to show
+
+No trucks to show
+
+#### Summary
+
+No trucks to show
+
+#### HTML (html)
+
+```html
+<div class="display-flex align-items-center justify-content-center height-100">
+    <div class="text-center text-color-dark">
+        <i>No trucks to show</i>
+    </div>
+</div>
+```
+
+### Example: No trucks to showAdd truck
+
+No trucks to show
+Add truck
+
+#### Summary
+
+No trucks to show
+Add truck
+
+#### HTML (html)
+
+```html
+<div class="display-flex align-items-center justify-content-center height-100">
+    <div class="text-center text-color-dark">
+        <div>
+            <i>No trucks to show</i>
+        </div>
+        <button class="btn btn-primary margin-top-15" type="button">
+            <span class="rioglyph rioglyph-plus margin-right-5">
+            </span>
+            <span>Add truck</span>
+        </button>
+    </div>
+</div>
+```
+
+### Example: Example 4
+
+Click meGenerating sunshine
+
+#### Summary
+
+Click meGenerating sunshine
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column align-items-center justify-content-center height-100">
+    <label>Click me</label>
+    <button type="button" class="btn btn-primary btn-component" tabindex="0">
+        <span class="rioglyph rioglyph-weather-sunny text-bold">
+        </span>
+        <span>Generating sunshine</span>
+    </button>
+</div>
+```
+
+### Example: Example 5
+
+Generating foobar
+
+#### Summary
+
+Generating foobar
+
+#### HTML (html)
+
+```html
+<div class="display-flex align-items-center justify-content-center height-100">
+    <button class="btn btn-primary btn-loading disabled" type="button">Generating foobar</button>
+</div>
+```
+
+### Example: Example 6
+
+Column 1Column 2
+
+Lorem ipsumFoobar
+
+#### Summary
+
+Column 1Column 2
+
+Lorem ipsumFoobar
+
+#### HTML (html)
+
+```html
+<table class="table table-bordered table-head-filled">
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th class="text-center">Column 2</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Lorem ipsum</td>
+            <td class="text-center">
+                <button type="button" class="btn btn-primary btn-component" tabindex="0">
+                    <span class="rioglyph rioglyph-cloud-download">
+                    </span>Foobar</button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+```
+
+### Example: Example 7
+
+Column 1Column 2
+
+Lorem ipsumFoobar
+
+#### Summary
+
+Column 1Column 2
+
+Lorem ipsumFoobar
+
+#### HTML (html)
+
+```html
+<table class="table table-bordered table-head-filled">
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th class="text-center">Column 2</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Lorem ipsum</td>
+            <td class="text-center">
+                <button type="button" class="btn btn-primary btn-component" tabindex="0">Foobar</button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+```
+
+### Example: Example 8
+
+Column 1Column 2Column 3Column 4
+
+#### Summary
+
+Column 1Column 2Column 3Column 4
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive">
+    <table class="table table-bordered table-head-filled">
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+            </tr>
+        </thead>
+    </table>
+    <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+        <div class="spinner">
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+        </div>
+    </div>
+    <div class="position-absolute top-0 right-0 bottom-0 left-0 bg-warning opacity-10">
+    </div>
+</div>
+```
+
+### Example: Example 9
+
+Column 1Column 2Column 3Column 4
+
+#### Summary
+
+Column 1Column 2Column 3Column 4
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive">
+    <table class="table table-bordered table-head-filled">
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td colspan="4">
+                    <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+                        <div class="spinner">
+                            <div>
+                            </div>
+                            <div>
+                            </div>
+                            <div>
+                            </div>
+                            <div>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+### Example: Example 10
+
+Loading...
+Loading...Loading...Loading...
+
+#### Summary
+
+Loading...
+Loading...Loading...Loading...
+
+#### HTML (html)
+
+```html
+<div class="padding-top-10 padding-bottom-10">
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <svg aria-labelledby="u59u9hf-aria" role="img" height="14" width="100%" class="ContentLoader max-width-300 ">
+                <title id="u59u9hf-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#u59u9hf-diff)" style="fill: url(&quot;#u59u9hf-animated-diff&quot;);">
+                </rect>
+                <defs>
+                    <clipPath id="u59u9hf-diff">
+                        <rect width="100%" height="100%" rx="3" ry="3">
+                        </rect>
+                    </clipPath>
+                    <linearGradient id="u59u9hf-animated-diff" gradientTransform="translate(-2 0)">
+                        <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                        </stop>
+                        <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                        </animateTransform>
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+        <div class="panel-body">
+            <svg aria-labelledby="ca4l6ac-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                <title id="ca4l6ac-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ca4l6ac-diff)" style="fill: url(&quot;#ca4l6ac-animated-diff&quot;);">
+                </rect>
+                <defs>
+                    <clipPath id="ca4l6ac-diff">
+                        <rect width="100%" height="100%" rx="3" ry="3">
+                        </rect>
+                    </clipPath>
+                    <linearGradient id="ca4l6ac-animated-diff" gradientTransform="translate(-2 0)">
+                        <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                        </stop>
+                        <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                        </animateTransform>
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg aria-labelledby="5gbtqw-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                <title id="5gbtqw-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#5gbtqw-diff)" style="fill: url(&quot;#5gbtqw-animated-diff&quot;);">
+                </rect>
+                <defs>
+                    <clipPath id="5gbtqw-diff">
+                        <rect width="100%" height="100%" rx="3" ry="3">
+                        </rect>
+                    </clipPath>
+                    <linearGradient id="5gbtqw-animated-diff" gradientTransform="translate(-2 0)">
+                        <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                        </stop>
+                        <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                        </animateTransform>
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg aria-labelledby="lvnk3o9-aria" role="img" height="14" width="100%" class="ContentLoader width-60pct ">
+                <title id="lvnk3o9-aria">Loading...</title>
+                <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#lvnk3o9-diff)" style="fill: url(&quot;#lvnk3o9-animated-diff&quot;);">
+                </rect>
+                <defs>
+                    <clipPath id="lvnk3o9-diff">
+                        <rect width="100%" height="100%" rx="3" ry="3">
+                        </rect>
+                    </clipPath>
+                    <linearGradient id="lvnk3o9-animated-diff" gradientTransform="translate(-2 0)">
+                        <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                        </stop>
+                        <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                        </stop>
+                        <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                        </animateTransform>
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 11
+
+Column 1Column 2Column 3Column 4
+
+Loading...Loading...Loading...Loading...
+Loading...Loading...Loading...Loading...
+Loading...Loading...Loading...Loading...
+
+#### Summary
+
+Column 1Column 2Column 3Column 4
+
+Loading...Loading...Loading...Loading...
+Loading...Loading...Loading...Loading...
+Loading...Loading...Loading...Loading...
+
+#### HTML (html)
+
+```html
+<table class="table table-condensed">
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Column 4</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <svg aria-labelledby="8u0xqdj-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="8u0xqdj-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#8u0xqdj-diff)" style="fill: url(&quot;#8u0xqdj-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="8u0xqdj-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="8u0xqdj-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="px9xjfl-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="px9xjfl-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#px9xjfl-diff)" style="fill: url(&quot;#px9xjfl-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="px9xjfl-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="px9xjfl-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="6vuviho-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="6vuviho-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#6vuviho-diff)" style="fill: url(&quot;#6vuviho-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="6vuviho-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="6vuviho-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="vd81z4-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="vd81z4-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#vd81z4-diff)" style="fill: url(&quot;#vd81z4-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="vd81z4-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="vd81z4-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <svg aria-labelledby="uszdbyb-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="uszdbyb-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#uszdbyb-diff)" style="fill: url(&quot;#uszdbyb-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="uszdbyb-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="uszdbyb-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="bmx8o3o-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="bmx8o3o-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#bmx8o3o-diff)" style="fill: url(&quot;#bmx8o3o-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="bmx8o3o-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="bmx8o3o-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="no7zu24-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="no7zu24-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#no7zu24-diff)" style="fill: url(&quot;#no7zu24-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="no7zu24-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="no7zu24-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="q29ebhb-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="q29ebhb-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#q29ebhb-diff)" style="fill: url(&quot;#q29ebhb-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="q29ebhb-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="q29ebhb-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <svg aria-labelledby="fid4e0i-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="fid4e0i-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#fid4e0i-diff)" style="fill: url(&quot;#fid4e0i-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="fid4e0i-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="fid4e0i-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="4fq46sj-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="4fq46sj-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#4fq46sj-diff)" style="fill: url(&quot;#4fq46sj-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="4fq46sj-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="4fq46sj-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="dhkkf69-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="dhkkf69-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#dhkkf69-diff)" style="fill: url(&quot;#dhkkf69-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="dhkkf69-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="dhkkf69-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+            <td>
+                <svg aria-labelledby="r17ckvsj-aria" role="img" height="14" width="100%" class="ContentLoader  ">
+                    <title id="r17ckvsj-aria">Loading...</title>
+                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#r17ckvsj-diff)" style="fill: url(&quot;#r17ckvsj-animated-diff&quot;);">
+                    </rect>
+                    <defs>
+                        <clipPath id="r17ckvsj-diff">
+                            <rect width="100%" height="100%" rx="3" ry="3">
+                            </rect>
+                        </clipPath>
+                        <linearGradient id="r17ckvsj-animated-diff" gradientTransform="translate(-2 0)">
+                            <stop offset="0%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <stop offset="50%" stop-color="#eeeeee" stop-opacity="1">
+                            </stop>
+                            <stop offset="100%" stop-color="#f5f6f7" stop-opacity="1">
+                            </stop>
+                            <animateTransform attributeName="gradientTransform" type="translate" values="-2 0; 0 0; 2 0" dur="2s" repeatCount="indefinite">
+                            </animateTransform>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </td>
+        </tr>
+    </tbody>
+</table>
+```